ES6 - 模块

ES6 模块

考虑一部分JavaScript代码需要重用的场景。ES6通过模块的概念来解决您的问题。

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

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

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

ES6模块是一个非常强大的概念。尽管到处都还没有支持，但你现在可以使用ES6代码并将其转换成ES5。您可以在构建过程中使用Grunt，Gulp，Babel或其他转译器来编译模块。为了演示的目的，本课使用Node.js来编译和执行代码，因为它基于控制台并易于理解。

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

导出单个值或元素 - 使用导出默认值

export default element_name

导出多个值或元素

export {element_name1,element_name2,....}

为了能够使用模块，请使用import关键字。以下是相同的语法。

导入单个值或元素

从module_name导入元素名称

导出多个值或元素

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

考虑一个JavaScript文件Message.js，其中包含一个方法printMsg（）。为了能够重用此方法提供的功能，请在Message.js文件中包含以下内容 -

exportdefault printMsg

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

import printMsg from './Message.js'

注 - 注意：导出语句中的多个元素应该用逗号分隔符分隔。进口同样如此。

定义一个模块：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/

其中，脚本是包含我的ES6代码示例的目录。我们将ES6代码转换成ES5并保存到上面所示的目录中。

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

在节点窗口中键入以下代码将代码转换为CommonJS格式 -

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

上述命令将传输脚本目录中的所有JS文件，并将其转译版本放入out子目录中。

第2步 - 执行脚本代码。

cd out
node consume_module.js

以下将是上述代码的输出。

Hello World

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