ES 6 模块

ES 6 模块

考虑一个需要重用部分JavaScript代码的场景。ES6为您提供了Modules（模块）概念。

一个模块只不过是一块写在文件中的javascript代码。模块中的函数或变量不可用，除非导出模块文件。

简单地说，这些Modules（模块）可以帮助在你自己的模块中编写代码，并只公开应该由代码的其他部分访问的部分代码。

必须将ES6模块转换为ES5代码，以便我们可以运行和测试代码。Transpilation是将代码从一种语言转换成对等语言的过程。ES6 Module Transpiler是一个工具，它将您的ES6模块编译成CommonJS或AMD风格的ES5兼容代码。

ES6模块是一个非常强大的概念。尽管目前还没有任何地方都提供支持，但是您可以使用ES6代码并将其转换为ES5。您可以在构建过程中使用grunt、gulp、babel或其他一些编译器来编译模块。为了演示的目的，本教程使用Node.js转换和执行代码，因为代码基于控制台，易于理解。

导出模块

要使模块的某些部分可用，请使用export关键字。以下是导出模块的语法。

导出单个值或元素 - 使用export default

export default element_name

导出多个值或元素

export {element_name1,element_name2,....}

导入模块

要使用模块，请使用import关键字。以下是语法。

导入单个值或元素

import element_name from module_name

导出多个值或元素

import {element_name1,element_name2,....} from module_name

考虑一个JavaScript文件Message.js，其中包含一个printMsg()方法。为了能够重用此方法提供的函数，请在Message.js文件中包含以下内容：

export default printMsg

打算使用该函数的脚本文件，例如User.js，必须通过包含以下内容，从Message模块导入该函数

import printMsg from './Message.js'

注意：export语句中的多个元素应由逗号分隔符分隔；import也是如此。export 命令可以出现在模块的任何位置，但必需处于模块顶层。import 命令会提升到整个模块的头部，首先执行。

示例：定义和使用ES6模块

定义模块：Message_module.js

function display_message() { 
   console.log("Hello World") 
} 
export default display_message

导入模块：consume_module.js

import display_message from './MessageModule.js' 
display_message()

使用以下命令通过npm安装es6-module-transpiler

npm install -g es6-module-transpiler

假设给定JS项目的目录结构如下：

D:/ 
ES6/ 
   scripts/ 
      app.js 
      utility.js 
   out/

其中，scripts是包含我们ES6代码示例的目录。我们将ES6代码转换为ES5并将它们保存到上面显示的目录中。

以下是步骤：

步骤1 - 导航到D：/ ES6 / scripts目录并将ES6代码转换为CommonJS格式；也可以选择转换为AMD格式，然后使用浏览器运行相同的格式。

在node窗口中键入以下内容以将代码转换为CommonJS格式

compile-modules convert -I scripts -o out Message_module.js 
   consume_module.js -format commonjs

上面的命令将转换scripts目录中的所有JS文件，并将其转换后的版本放入out子目录中。

步骤2 - 执行脚本代码。

cd out 
node consume_module.js

以下是上述代码的输出：

Hello World

注 - 模块也可以重新导出，即导入模块的代码也可以导出它。