ES6 模块

  ES6模块可以让我们的代码结构更加清晰,我们只需要在代码中开放需要对外的变量或者函数即可,其他的部分对模块外的代码来说是不可见的,本节介绍ES6模块的概念。

  ES6模块是一个非常强大的概念。虽然支持并不是所有浏览器都支持，但您可以让es6代码transpile到es5版本。您可以使用Grunt, Gulp, Babel 或其他transpiler来在构建过程中编译模块。为了演示的目的，本课使用node .js来执行代码，因为它是基于控制台的，易于理解。

导出模块

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

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

export default element_name

导出多个值

export {element_name1,element_name2,....}

导入模块

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

导入单个值

  从模块名称导入元素名称

导出多个值或元素

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

  考虑一个JavaScript文件message.js，它使用一个方法printmsg ()。要能够重用此方法提供的功能，请在message.js文件中包括以下内容

exportdefault printMsg

  要使用该函数的脚本文件，例如user.js，将必须从消息模块中导入该函数，方法如下:

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/

  其中，脚本是包含我的es6代码示例的目录。我们将把es6代码重新编译成es5，并将其保存到上面显示的目录中。

  以下是步骤

  步骤1-导航到D:/ ES6/scripts目录，将es6代码转换为commonjs格式。您还可以选择transpile到amd格式，然后使用浏览器运行相同的。

  在node提示符下键入以下内容以将代码转换为commonjs格式:

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

  上述命令将transpile脚本目录中的所有js文件，并将它们的transpiled版本放入out子目录中。

  步骤2-运行脚本

cd out 
node consume_module.js

  下面是输出

Hello World

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