ES6 模块

ES6引入模块支持。 ES6中的模块是单个文件，它允许代码和数据隔离，它有助于在逻辑上组织和分组代码。 在其他语言中，它被称为包或库。 模块内的所有代码和数据都有文件范围，这意味着它们不能从模块外部的代码访问。 要在模块外部共享代码或数据，需要使用export关键字导出。

// File: circle.js

export const pi = 3.141592;

export const circumference = diameter => diameter * pi;

上面的代码使用了用于圆周的箭头函数，这是ES6中引入的，并且是以下的缩写。

export function circumference(diameter) {
  return diameter * pi;
}

模块系统

在后端（服务器端）使用模块是相对简单的，你只需使用import关键字。 然而，Web浏览器没有模块或导入的概念，他们只知道如何加载JavaScript代码。 我们需要一种方法来引入一个javascript模块，以便从其他JavaScript代码开始使用它。 这是一个模块加载器

我们不会进入各种模块系统，但值得了解的是，有各种模块加载器可用。 流行的选择有：

• RequireJS
• SystemJS
• Webpack

从浏览器加载模块

下面我们使用SystemJS来加载模块。 该脚本首先加载SystemJS库的代码，然后调用System.import的函数用于导入（加载）应用程序模块。 加载ES6模块有点棘手。 在符合ES6的浏览器中，使用System关键字以异步方式加载模块。 为了使我们的代码与当前的浏览器一起使用，我们将使用SystemJS库作为polyfill：

  <script src="/node_module/systemjs/dist/system.js"></script>
  <script>
    var promise = System.import('app')
      .then(function() {
        console.log('Loaded!');
      })
      .then(null, function(error) {
        console.error('Failed to load:', error);
      });
  </script>