ES6 - 模块

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

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

简单来说,模块可以帮助您在模块中编写代码并仅公开那些代码应该由代码的其他部分访问的部分代码.

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 a single value or element

从module_name导入元素名称

Export multiple values or elements

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

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

exportdefault printMs

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

import printMsg from './Message.js'

注意:注意:export语句中的多个元素应由逗号分隔符分隔。 导入也是如此。

示例:定义和使用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格式,然后使用浏览器运行相同的操作。

在节点窗口中键入以下内容以将代码转换为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

注意:模块也可以重新导出,即导入模块的代码也可以导出它。