如何在 ES2015 模块中使用全局变量答案

【问题标题】：How can I make use of global variables in ES2015 modules如何在 ES2015 模块中使用全局变量
【发布时间】：2015-11-08 16:31:34
【问题描述】：

我正在使用 Gulp、Babelify 和 Browserify 将 ES2015 编译成 ES5。

文件夹结构：

project
  - js
    - level.js
    - main.js

如果我有以下定义的模块：

// level.js
var level = [];

level[0] = {
    name: 'level1',
    grid: {
        width: GRID_WIDTH,
        height: GRID_HEIGHT
    }
};

export default level;

然后我有了我的主要 JavaScript 文件：

// main.js
import level from './level.js';

var siteGame = (function() {
    var GRID_WIDTH = 50,
        GRID_HEIGHT = 50;

    console.log(level);

}());

如何确保 GRID_WIDTH 和 GRID_HEIGHT 在 level.js 中可用？

目前我收到一个错误，提示 GRID_WIDTH 未定义（来自 level.js）

【问题讨论】：

简单地说，你不知道。如果你真的需要，可以将 Webpack 与 DefinePlugin 一起使用，但最好以不同的方式解决这个问题，例如 requires。
为什么在main.js 中将这些变量设置为 IIFE 的本地变量？您是否打算将它们保密，是否打算使用多个不同的值（在多个范围内）？

标签： javascript ecmascript-6 browserify babeljs

【解决方案1】：

模块的全部意义在于每个模块都有自己的范围。如果您想将数据“注入”到模块中，请从 level.js 中导出一个接受维度的函数，构造数组/对象并返回它，或者将维度放入自己的模块中并将其导入 level.js

【讨论】：

【解决方案2】：

您在函数内定义了这些变量 - 它们在该函数的 btackets 中生存和死亡，您无法在它们之外的任何地方访问它们。如果你想全局使用这些变量，你可以 -

像在 es5 中所做的那样将它们写入全局窗口对象 - 但由于各种原因不太推荐
1. 创建一个模块，该模块导出一个包含您希望在应用程序中公开的所有变量的对象，这样您就可以导入该模块并获取您需要的所有变量。

我真的推荐第二个选项而不是第一个选项。

【讨论】：

在window 上放东西的问题并不是内存管理的问题，而是封装和副作用的问题；您不能保证另一个脚本不会修改该 window 变量，也不能保证该变量在您使用它时可用。它还迫使您在浏览器中或通过jsdom/similar 运行所有代码，这对于通常具有某种 NodeJS 工具的现代 Web 应用程序来说很糟糕。