使用Parcel Bundler时如何在函数内设置可访问的全局变量？

问题原因 #

Parcel 会默认将所有 JS 文件识别为独立模块，每个文件的顶层作用域属于模块私有作用域，而非浏览器全局作用域。你在顶层用 var myNum = 32 声明的变量仅在当前 JS 文件模块内可用，不会自动挂载到 window 全局对象上，所以访问 window.myNum 会返回 undefined。

解决方法 #

方法1：直接显式挂载到window对象 #

这是最简单的适配方案，直接将需要全局访问的变量手动挂载到window上：

// 替换原来的 var myNum = 32;
window.myNum = 32;

function randomizer(limit) {
    let myNum = Math.floor(Math.random() * limit);
    console.log("myNum is " + myNum);
    // 这里就能正常访问到全局的myNum了
    console.log("Global myNum is " + window.myNum);
    return myNum;
}

方法2：用globalThis做跨环境兼容 #

如果你的代码需要同时兼容浏览器、Node.js等多环境，可以用ES2020新增的globalThis，它会自动指向当前环境的全局对象：

globalThis.myNum = 32;

方法3：自定义命名空间减少全局污染 #

如果需要挂载的全局变量较多，推荐自定义一个全局命名空间，避免和其他第三方库的全局变量冲突：

// 初始化自定义全局命名空间
window.MyApp = window.MyApp || {};
// 把变量挂载到自定义命名空间下
MyApp.myNum = 32;

// 访问方式
console.log("Global myNum is " + MyApp.myNum);

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