理解ES6的模块(Understanding ES6 Modules)

最新推荐文章于 2024-04-23 10:56:00 发布

jjvein

最新推荐文章于 2024-04-23 10:56:00 发布

阅读量1.9k

点赞数 1

分类专栏： Javascript 文章标签： es6

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

理解ES6的Modules

原文出处: 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 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.

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

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