理解ES6的模块(Understanding ES6 Modules)

export {generateRandom as random, sum as doSum}

下面我们再来看看如何在其他的模块中是哟了那个这些导出的值.

app.js

import { generateRandom, sum } from'utility';

console.log(generateRandom());//logs a random number
console.log(sum(1, 2));//3

注意第一行. 它将从utility模块中导入值. 当然, 如果你只想导出一个值(例如sum), 你可以使用下面的方式:

同样, 你也可以将整个模块当作一个对象导入, 然后引用的时候, 使用对象属性的方法. 所以我们可以使用下面的方式:

import 'utility' as utils;

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3

很简单是不是? 这其实就是ES6的"命名导入". 接下来, 我们来看看如何使用默认导出.

"默认导出"和"重导出"(Default Exports and Re-exporting)

如果你只想从一个模块中导出一个值, 可以使用默认导出. 为了演示默认导出的用法, 我们需要修改utility.js

utility.js

var utils = {
  generateRandom:function() {
    return Math.random();
  },
  sum:function(a, b) {
    return a + b;
  }
};

export default utils;

最后一行将utils 这个变量进行导出. 而在另外一个模块中, 引用方法如下:

app.js

import utils from'utility';

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3
export default utils; //exports the imported value

第一行代码首先将utils对象进行导入, 你也可以同样可以将其重新导出.如最后一行.

以上这些就是ES6 Modules 的大致介绍. 接下来,我们来看一下如何将ES6的模块转变为ES5, 并且可以运行并且测试.

使用ES6模块转换器.(Using the ES6 Module Transpile)

ES6模块转换器是一个可以将你的ES6代码转换成CommonJS 或者AMD 风格的ES5代码

你可以使用下面的命令进行安装.

在转换之前, 我们先来看看代码的结构. 源码可以去github上面下载

下载地址: Source Code

scripts 文件夹是我们模块的代码, 我们将编译这部分的代码并且放置到out目录中.

进入es6-modules 目录, 运行命令.

compile-modules convert -I scripts -o out app.js utility.js --format commonjs