HTML模块脚本定义auth后，auth.js提示auth未定义的解决办法

你在type="module"脚本中定义的auth是模块局部变量，ES模块的作用域是独立的，默认不会将内部变量暴露到全局window对象中。而后续的auth.js是普通脚本，运行在全局作用域，自然找不到auth变量，因此抛出ReferenceError。

推荐采用模块化规范重构代码，避免全局变量污染，以下是具体步骤：

步骤1：拆分Firebase初始化模块 #

创建static/firebase.js文件，将Firebase初始化逻辑封装并导出所需对象：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';

const firebaseConfig = {
  apiKey: "你的API密钥",
  authDomain: "case-study---login-system.firebaseapp.com",
  projectId: "case-study---login-system",
  storageBucket: "case-study---login-system.appspot.com",
  messagingSenderId: "你的Sender ID",
  appId: "你的App ID",
  measurementId: "你的Measurement ID"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);

// 导出供其他模块使用
export { auth, db };

步骤2：修改HTML脚本引用 #

将原页面中的模块脚本移除，把auth.js和index.js改为模块脚本：

<!-- Compiled and minified (Materialized)JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Scripts -->
<script type="module" src="static/auth.js"></script>
<script type="module" src="static/index.js"></script>

步骤3：在auth.js中导入auth对象 #

修改auth.js，通过模块导入获取auth：

// 导入Firebase auth对象
import { auth } from './firebase.js';

// Signup 
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // 获取用户信息
    const email = signupForm['signup-email'].value;
    const password = signupForm['signup-password'].value;
    // 注册用户
    auth.createUserWithEmailAndPassword(email,password).then(cred => {
        console.log(cred);
    }); 
});

临时快速解决方案（不推荐长期使用） #

如果不想重构模块化结构，可在原页面的模块脚本中将auth挂载到全局window对象：

// make auth and firestone references 
const auth = getAuth(app);
const db = getFirestore(app);
// 挂载到全局
window.auth = auth;
window.db = db;

此方法能让auth.js直接访问全局的auth变量，但会破坏模块封装性，增加全局变量污染风险，仅适合临时调试。

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