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

How can I make use of global variables in ES2015 modules

本文关键字：全局变量 模块 ES2015      更新时间：2023-09-26

我正在使用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_HIGHT在level.js中可用？

目前我收到一个错误，建议GRID_WIDTH未定义（来自级别.js）

模块的全部意义在于每个模块都有自己的作用域。如果您想将数据"注入"到模块中，可以从level.js导出一个接受维度、构造数组/对象并返回它的函数，也可以将维度放在自己的模块中并导入level.js

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

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

我真的推荐第二种选择而不是第一种。

相关文章：