如何在Webpack环境下复用header.js中的变量？

1. 全局挂载（最简便） #

在header.js里拿到userData后，把它挂载到window全局对象上：

// header.js 获取到用户数据后
window.userData = userData;

之后在其他JS文件里直接用window.userData就能访问，但要确保header.js先于其他JS文件加载执行，不然会拿到undefined。

2. ES模块导出导入（更规范） #

如果你的项目支持ES模块（比如用构建工具，或者script标签加type="module"），直接把userData导出：

// header.js
let userData;

// Firebase认证逻辑
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    userData = user;
  }
});

export { userData };

然后在其他JS文件里导入使用：

// 其他页面的JS文件
import { userData } from './header.js';
// 注意：Firebase认证是异步操作，要等userData有值后再用，比如加监听逻辑

3. 自定义事件传递（适配异步场景） #

要是担心异步获取的userData在其他文件里拿不到最新值，可以用自定义事件传递：

// header.js 获取到userData后
const userReadyEvent = new CustomEvent('userDataReady', { detail: userData });
window.dispatchEvent(userReadyEvent);

在其他JS文件里监听这个事件：

// 其他JS文件
window.addEventListener('userDataReady', (e) => {
  const userData = e.detail;
  // 在这里处理用户数据
});

默认情况下，header.js里的局部变量其他文件是访问不到的，必须通过上面的方式把变量暴露出去才能复用。

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