Firebase导入中initializeApp的位置及初始化写法正确性咨询

关于你的写法是否正确 #

你的写法完全是正确的，可以正常使用。

firebase/app是Firebase官方在包的package.json的exports字段中配置的导出别名，其实际对应的源码路径就是firebase/firebase-app，你直接从实际路径导入initializeApp的逻辑没有问题，不会产生额外的性能问题或者兼容性风险。

官方推荐写法无法使用的原因 #

你遇到的import { initializeApp } from 'firebase/app'无法正常运行的问题，通常是以下两个原因导致的：

• 环境不支持package.json的exports字段：如果你的项目使用的是低于14.13.0版本的Node.js，或者使用webpack 4及更低版本、旧版CRA等不支持package.exports字段的打包工具，就无法识别firebase/app这个别名路径，只能访问实际的文件路径firebase/firebase-app。
• 模块规范不匹配：如果你的项目没有在package.json中配置"type": "module"，默认使用CommonJS规范，部分版本的Firebase的ES模块别名路径在CommonJS环境下会解析失败。

额外说明 #

你最开始遇到的控制台警告，是因为import firebase from "firebase/compat"是Firebase v9+提供的v8版本兼容层，会全量引入所有Firebase组件的代码，无法做tree shaking优化打包体积，所以会触发开发环境的警告。你后续改成直接导入initializeApp的写法已经解决了这个问题，不需要再导入全量兼容包。

如果想要适配官方文档的写法，可以做以下调整：

1. 先确认本地安装的Firebase是v9及以上的稳定版本，可通过npm list firebase命令查看本地安装的版本
2. 升级Node.js到16+版本，升级项目的打包工具（webpack、Vite等）到支持exports字段的版本
3. 也可以直接在打包工具的别名配置中，将firebase/app映射到firebase/firebase-app，就可以直接使用官方文档的写法

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