JavaScript环境下能否共享父项目配置的Firebase App Config给子模块？

可以实现共享，但你当前遇到的错误是因为Webpack打包子模块时，将firebase/compat/app也打包进了私有包，导致子模块使用的Firebase实例和父项目的不是同一个——父项目初始化的App只存在于它自己的Firebase实例中，子模块的实例自然找不到。

解决方案 #

1. 配置Webpack让子模块复用父项目的Firebase依赖（推荐）

在子模块@custom-package/views的Webpack配置中，将Firebase相关依赖设为external，这样打包时不会把Firebase打包进私有包，而是直接使用父项目提供的Firebase实例。

子模块的webpack.config.js示例：

module.exports = {
  // 其他配置项...
  externals: {
    'firebase/compat/app': 'firebase/compat/app',
    'firebase/compat/firestore': 'firebase/compat/firestore' // 用到其他Firebase服务时同理添加
  }
};

重新打包私有包后，子模块会直接引用父项目的Firebase实例，自然能读取到已初始化的[DEFAULT] App。

2. 显式传递Firebase实例给子模块

修改子模块的方法，让它接收父项目的Firebase实例作为参数，直接使用该实例进行操作。

子模块代码修改：

// @custom-package/views 包内代码
const someView = (firebaseInstance) => {
  // 使用传入的实例执行Firestore查询
  firebaseInstance.firestore()/* ...你的查询逻辑 */;
};

export default {
  someView
};

父项目调用修改：

import firebase from "firebase/compat/app";
firebase.initializeApp(window.config);

import { someView } from "@custom-package/views";

// 传入父项目的Firebase实例
someView(firebase);

3. 全局挂载Firebase实例（应急方案，不推荐）

将父项目的Firebase实例挂载到全局window对象上，子模块直接从全局获取。这种方式容易引发全局变量冲突，仅作为临时解决方法。

父项目代码修改：

import firebase from "firebase/compat/app";
firebase.initializeApp(window.config);
window.firebase = firebase; // 挂载到全局

子模块代码修改：

// @custom-package/views 包内代码
const someView = () => {
  const firebase = window.firebase;
  firebase.firestore()/* ...你的查询逻辑 */;
};

export default {
  someView
};

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