如何混合使用NPM管理Firebase兼容库与CDN加载多语言FirebaseUI？

问题背景 #

项目使用NPM管理Firebase库，但FirebaseUI的NPM包仅支持英文，需通过CDN加载多语言版本。尝试混合使用NPM的Firebase compat库与CDN的FirebaseUI时出现报错。

代码对比 #

正常运行的全CDN版本 #

<script is:inline src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script is:inline src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script is:inline src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>

混合使用NPM失败的版本 #

<script is:inline src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';
    import firebase from 'firebase/compat/app';
    import 'firebase/compat/auth';

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>

报错信息 #

firebase-ui-auth__es.js:422 Uncaught ReferenceError: firebase is not defined
    at new Dn (firebase-ui-auth__es.js:422:1944)

报错原因 #

CDN加载的FirebaseUI会默认在全局作用域查找firebase对象，但通过NPM导入的Firebase compat库不会自动将firebase挂载到window全局对象上，导致FirebaseUI找不到依赖的Firebase实例，抛出引用错误。

解决方法 #

方案一：将NPM导入的Firebase暴露到全局 #

在导入Firebase后，手动将其挂载到window对象，供CDN的FirebaseUI调用：

<script is:inline src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';
    import firebase from 'firebase/compat/app';
    import 'firebase/compat/auth';

    // 新增：将firebase实例暴露到全局作用域
    window.firebase = firebase;

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>

方案二：初始化FirebaseUI时指定Firebase实例（部分版本支持） #

部分FirebaseUI版本允许在初始化AuthUI时直接传入Firebase auth实例，无需依赖全局对象：

const ui = new firebaseui.auth.AuthUI(firebase.auth());

注意事项 #

• 确保NPM安装的Firebase版本与CDN加载的FirebaseUI版本兼容，避免版本不匹配引发其他异常
• 切换国际化语言只需替换CDN链接中的语言后缀，例如简体中文使用firebase-ui-auth__zh-CN.js

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