ES6 - Modules
考虑需要重用部分JavaScript代码的场景。 ES6通过模块的概念来帮助您解决问题。
module只不过是在文件中编写的一大块JavaScript代码。 除非模块文件导出模块，否则模块中的函数或变量不可用。
简单来说，这些模块可以帮助您在模块中编写代码，并仅公开应该由代码的其他部分访问的代码部分。
必须将ES6模块转换为ES5代码，以便我们可以运行和测试代码。 Transpilation是将代码从一种语言转换为对应语言的过程。 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'
Note - 注意:export语句中的多个元素应由逗号分隔符分隔。 导入也是如此。
示例:定义和使用ES6模块
Defining a module: Message_module.js
function display_message() {
console.log("Hello World")
}
export default display_message
Importing the module: 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并将它们保存到上面显示的目录中。
以下是相同的步骤 -
Step 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子目录中。
Step 2 - 执行脚本代码。
cd out
node consume_module.js
以下是上述代码的输出。
Hello World
Note - 模块也可以重新导出，即导入模块的代码也可以导出它。
