如何在不修改package.json的单个文件中使用import引入Firebase

1. 将单个文件改为ES模块（.mjs扩展名） #

把你的firebase.js重命名为firebase.mjs，Node.js会自动将其识别为ES模块，你可以正常使用import语句：

// firebase.mjs
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js";
// 初始化并导出Firebase应用
const app = initializeApp({ /* 你的Firebase配置 */ });
export default app;

然后在原来的CommonJS文件中，通过动态import加载这个ES模块（这是CommonJS与ES模块交互的官方兼容方式）：

// 原CommonJS文件（如app.js）
async function initFirebase() {
  const { default: firebaseApp } = await import('./firebase.mjs');
  // 在这里使用firebaseApp
}
initFirebase();

注意：动态import是异步操作，需在async函数内使用，或通过.then()处理回调。

2. 使用Firebase的UMD版本直接在CommonJS中加载 #

Firebase提供了兼容CommonJS的UMD格式脚本，可通过以下两种方式使用：

方式A：本地缓存UMD脚本（推荐生产环境） #

手动下载https://www.gstatic.com/firebasejs/9.11.0/firebase-app.umd.js到项目目录（比如lib/firebase-app.umd.js），然后用require加载本地文件：

// firebase.js (CommonJS文件)
const { initializeApp } = require('./lib/firebase-app.umd.js');
const app = initializeApp({ /* 你的配置 */ });
module.exports = app;

这种方式避免了网络依赖，稳定性更高。

方式B：启用Node.js远程模块加载（仅测试场景） #

启动Node.js时添加--experimental-network-imports实验性参数，即可直接用require引入远程UMD脚本：

// firebase.js (CommonJS文件)
const { initializeApp } = require('https://www.gstatic.com/firebasejs/9.11.0/firebase-app.umd.js');
const app = initializeApp({ /* 你的配置 */ });
module.exports = app;

⚠️ 注意：该特性为实验性，存在安全与稳定性风险，不建议生产环境使用。

3. 异步加载UMD脚本到全局（快速临时方案） #

若不想修改文件结构或下载脚本，可通过HTTP请求获取UMD脚本内容，在CommonJS环境中执行并挂载到全局：

// firebase.js (CommonJS文件)
const https = require('https');

function getFirebaseApp(config) {
  return new Promise((resolve, reject) => {
    https.get('https://www.gstatic.com/firebasejs/9.11.0/firebase-app.umd.js', (res) => {
      let scriptContent = '';
      res.on('data', (chunk) => scriptContent += chunk);
      res.on('end', () => {
        // 执行脚本，将firebase挂载到全局对象
        eval(scriptContent);
        const app = global.firebase.initializeApp(config);
        resolve(app);
      });
    }).on('error', reject);
  });
}

module.exports = getFirebaseApp;

使用示例：

// 其他CommonJS文件
const getFirebaseApp = require('./firebase.js');
getFirebaseApp({ /* 你的配置 */ }).then(app => {
  // 在这里使用Firebase应用
});

内容的提问来源于stack exchange，提问作者marsian8