理解ES6的模块(Understanding ES6 Modules)

理解ES6Modules


原文出处: Understanding ES6 Modules.


    


基础(Basic)


    在ES6,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的,

除非你显示的使export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个.

ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export.

相似的, 如果想要使用来自另外一个模块中的变量, 可以使用关键词import.


简单模块Demo(Working with a Simple Module)


让我们来创建一个拥有两个功能函数的模块.


1. generateRandom() : 生成一个随机的数字


2. sum(): 将两个数字进行相加.



接下来, 创建文件utility.js :

utility.js

functiongenerateRandom() {
    returnMath.random();
}
 
function sum(a, b) {
    return a + b;
}
 
export { generateRandom, sum }



关键词export 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.

你也可以使用下面的方式对导出的内容进行重命名.

1
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), 你可以使用下面的方式:
1
import { sum } from'utility';

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

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代码
你可以使用下面的命令进行安装.
1
npm install -g es6-module-transpile
在转换之前, 我们先来看看代码的结构. 源码可以去github上面下载
下载地址: Source Code
1
2
3
4
5
es6-modules
    scripts/
        app.js
        utility.js
    out/

scripts 文件夹是我们模块的代码, 我们将编译这部分的代码并且放置到out目录中.
进入es6-modules 目录, 运行命令.

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







没有更多推荐了,返回首页