如何将 firebase 应用程序作为浏览器模块导入来导入？

Question

我正在尝试在客户端导入 firebase 应用程序（8.0.2）而不使用捆绑器。 我从 CDN 下载了 firebase-app.js 并将其托管在我的服务器上。

目标是将 Firebase 应用程序模块导入到我的模块之一中，如下所示：

import firebase from '/vendor/firebase-app.js';

但是，当尝试访问 firebase 时，我收到有关未定义默认导出的错误。在 Firefox 中，这是：

未捕获的语法错误：找不到导入：默认值

我哪里错了？模块导入仅适用于捆绑程序吗？ 我相信我有一些根本性的误解，但我无法弄清楚。

感谢您的帮助！

Answer 1

正如 Doug 评论的那样，该语法旨在与捆绑器一起使用。

如果您想在模块脚本中导入 SDK，那么您将需要使用 CDN，如下所示：

useEffect(() => {
    let isSubscribed = true
    const initFirebase = async () => {
        try {
            const [{
                    initializeApp
                },
                {
                    getFirestore,
                    collection,
                    addDoc
                }
            ] = await Promise
                .all([
                    import('https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js'),
                    import('https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js')
                ])

            const fireApp = initializeApp(firebaseConfig)
            const appDB = getFirestore(fireApp)

            if (isSubscribed) {
                setFirebase(fireApp)
                setDB(appDB)
                setResult('success')
            }
        } catch (e) {
            console.log(e);
            setResult('error')
        }
    }

    if (firebaseConfig) {
        initFirebase()
            .catch(e => {
                console.log(e);
            })
    }

    return () => is Subscribed = false
}, [firebaseConfig])

这是我正在开发的 POC，单个 HTML 文件，Preact + Firebase，不需要捆绑程序。

要成为某事还有很长的路要走，需要验证，但它回答了你的问题。

这是repo。

Answer 2

在 Firebase“^9.9.4”中使用：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {}
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app)

Answer 3

sdsadasasdsdasdasdasdsadadasdsadadadadadadadadadad