Question

我正在使用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);

}());

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

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

Answer 1

模块的重点是每个模块都有自己的范围。如果要将数据“注入”模块，可以从接受维度的level.js导出函数，构造数组/对象并返回它，或者将维度放在自己的模块中并将其导入level.js < / p>

Answer 2

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

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

我真的推荐第一个选项超过第一个选项。

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

2 个答案: