javascript - 未捕获的语法错误 : Cannot use import statement outside a module (Using Firebase)

Question

我在通过我的 html 表单将数据存储到我的数据库时遇到问题，我得到的错误来 self 的导入语句，它是:未捕获的语法错误:无法在模块外部使用导入语句!

代码如下:

import {
  initializeApp
} from "firebase/app";
const firebaseConfig = {
  apiKey: "MY_API_KEY", //actual values are in my code, changed here for security purposes.

  authDomain: "My_auth_Domain",
  databaseURL: "FirebaseDb_URL",
  projectId: "Project_id",
  storageBucket: "storageBucket",
  messagingSenderId: "SenderId",
  appId: "appId"
};



const app = initializeApp(firebaseConfig);


let inviteInfo = firebase.database().ref("inviteinfos");


document.getElementById("#regform", submitForm);

function submitForm(e) {
  let name = document.getElementsByName("fullname").value;
  let compName = document.getElementsByName("compName").value;
  let email = document.getElementsByName("email").value;
  let address = document.getElementsByName("address").value;
  let contact = document.getElementsByName("contact").value;
  console.log(name, compName, email, address, contact);

  saveContactInfo(name, compName, email, address, contact);
  document.getElementById("#regform").reset();
}

到目前为止我尝试了什么:

1. 将导入语句更改为以下内容

const {initializeApp} = require("firebase/app");

1. 通过 firebase 提供的链接使用导入

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";

1. 使用 const 和 firebase 提供的链接:

const {initializeApp} = require("https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js");

1. 使用模块类型的脚本标记将 js 从 app.js 移动到主 html 页面。
2. 使用 npm 安装 firebase 来检索模块。
3. 关于基于链接的解决方案，我尝试删除 -app 以查看它是否有所作为，但没有。

到目前为止，这些都对我不起作用，我尝试将信息存储到的表目前不存在，但研究表明即使在没有表存在的情况下运行也会自动为我创建表。

Answer 1

像这样加载 app.js:

<script type="module" src="./app.js"></script>

在 app.js 中，您可以像这样导入 firebase-app:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
// ...

这是一个示例(我不能为 app.js 使用单独的文件，但这表明它确实有效):

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
// Check that it worked and returned a function:
console.log(typeof initializeApp); // "function"
</script>

你根本不需要 firebase-app.js 的 script 标签，它会因为你的 import< 而被浏览器加载.

请注意，这将在浏览器中本地使用模块。所有现代浏览器都直接支持这样做，但像 Internet Explorer 这样的过时浏览器不支持，并且像这样单独加载模块可能涉及许多小的 HTTP 调用而不是一些较大的调用，这可能导致页面加载延迟，即使使用现代网络协议(protocol)也是如此SPY。出于这个原因，人们经常使用像 Vite、Rollup、Webpack 等打包工具，将模块组合成少量的打包文件。如果你愿意，你可以考虑这样做。但同样，现代浏览器本身就支持模块，因此您不必这样做。

---

在每个要从 firebase-app 导入的地方使用 "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js" 可能有点痛。您有两种选择可以使它更容易:

1.在基于 Chromium 的浏览器 ( only, sadly, for now ) 中，您可以使用 import map :

<script type="importmap">
{
    "imports": {
        "firebase-app": "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"
    }
}
</script>

这会告诉您的浏览器，当您从 "firebase/app" 导入时，它应该使用 "https://www.gstatic.com/firebasejs/9.6.6/firebase-应用程序.js”。

实例:

<script type="importmap">
{
    "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"
    }
}
</script>

<script type="module">
import { initializeApp } from "firebase/app";
// Check that it worked and returned a function:
console.log(typeof initializeApp); // "function"
</script>

2。如果您不能使用导入映射，您可以编写一个模块，从 firebase-app 重新导出所有内容，然后在您的代码中从该模块导入，而不是直接从 firebase-app :

您自己的本地 firebase-app.js 文件:

// This re-exports all of its named exports (but not its default, if any)
export * from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
/* firebase-app.js doesn't provide a default export. If it did, this is
   how you'd re-export it:
export { default } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
*/

然后 app.js 将使用 firebase-app.js:

import { initializeApp } from "./firebase-app.js";

(我不能用 Stack Snippets 做一个活生生的例子，但是 here's that on CodeSandbox。)