Firebase SDK V9 如何使用/__/firebase/init.js实现自动配置

/__/firebase/init.js 本身的输出逻辑未发生变动，加载完成后会自动将当前项目的初始化配置挂载到 window.firebaseConfig 全局变量上。V9 版本移除了旧版自动初始化全局对象的逻辑，因此只需主动调用模块化初始化方法传入该全局配置，即可实现和旧版一致的自动配置能力。

浏览器端直接使用ES模块的实现示例 #

<!-- 优先加载init.js，获取项目配置 -->
<script src="/__/firebase/init.js"></script>
<!-- 模块化初始化Firebase -->
<script type="module">
  // 导入Firebase核心初始化方法
  import { initializeApp } from "firebase/app"
  // 按需导入所需的服务模块
  import { getFirestore } from "firebase/firestore"
  import { getAuth } from "firebase/auth"

  // 直接传入init.js暴露的全局配置完成初始化
  const firebaseApp = initializeApp(window.firebaseConfig)
  // 初始化对应服务后即可正常使用
  const db = getFirestore(firebaseApp)
  const auth = getAuth(firebaseApp)
</script>

工程化项目（npm包引入）的实现示例 #

首先在项目HTML入口文件的<head>节点中引入init.js，保证配置提前加载：

<head>
  <!-- 其他head内容 -->
  <script src="/__/firebase/init.js"></script>
</head>

在项目初始化Firebase的逻辑中直接读取全局配置即可：

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"

// 可添加兜底配置逻辑，适配本地开发无init.js服务的场景
const firebaseConfig = window.firebaseConfig || {
  // 本地开发用的手动配置，可选
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

注意事项 #

• 需保证/__/firebase/init.js的加载时机早于Firebase初始化代码执行，避免出现window.firebaseConfig未定义的报错
• 若使用TypeScript，可在全局类型声明中添加firebaseConfig的类型定义，避免类型报错

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