注：本文为 《 JavaScript 完全手册（2018版） 》第34节，你可以查看该手册的完整目录。

ES Modules 是用于处理模块的 ECMAScript 标准。 虽然 Node.js 长期使用 CommonJS 标准，但浏览器从未有过模块系统。 每个主要决策（如模块系统）必须首先由 ECMAScript 标准化，然后由浏览器实施。

这个标准化过程在 ES6 中完成，浏览器开始实施这个标准，试图以相同的工作方式保持一致性，，现在 Chrome，Safari，Edge 和 Firefox（从 60 版本开始）支持ES 模块。

模块非常酷，因为它们允许你封装各种功能，并将这些功能作为库公开给其他 JavaScript 文件。

ES 模块语法

导入一个模块可以用 import ：

import package from 'module-name'

然而 CommonJS 使用：

const package = require('module-name')

一个模块是一个 JavaScript 文件，通过 export 导出一个或多个值（对象，函数或变量）。举个例子，这个模块模块导出一个返回字符串大写的函数：

uppercase.js 文件:

export default str => str.toUpperCase()

在此示例中，模块定义了单个默认导出(default export)，因此它可以是匿名函数。 否则，它需要一个名称来区分其它的导出。

现在，任何其他 JavaScript 模块都可以通过 import 来导入 uppercase.js 提供的功能。

万博manbetx平台页面可以使用带有特殊 type="module" 属性的 <script> 标记添加模块：

<script type="module" src="index.js"></script>

注意：此模块导入的行为类似于 defer 脚本加载。请参阅 详解 script 标签(async,defer,integrity,crossorigin 和 onerror 属性)

特别要注意：任何使用 type="module" 加载的脚本都是以 严格模式(strict mode) 加载的。

在这个例子中，uppercase.js 模块定义了一个默认导出，所以当我们导入这个模块时，可以为它指定一个你自己喜欢的名称：

import toUpperCase from './uppercase.js'

然后我们可以使用它：

toUpperCase('test') //'TEST'

你还可以使用绝对路径来导入模块，以便引用其它域名中定义的模块：

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

这种导入语法也是有效的：

import { foo } from '/uppercase.js'
import { foo } from '../uppercase.js'

但是下面的导入语法是无效的：

import { foo } from 'uppercase.js'
import { foo } from 'utils/uppercase.js'

路径必须是绝对路径，或在名字前加上 ./ 或者 / 。

其它 导入(import)/导出(export) 方法

我们在上面看到了这个例子：

export default str => str.toUpperCase()

上面的代码会创建一个默认导出(export)。但是下面的代码我们可以看到，在文件中，你可以使用以下语法导出多个内容：

const a = 1
const b = 2
const c = 3

export { a, b, c }

另一个模块可以使用以下代码导入所有上面这些导出：

import * from 'module'

你可以使用解构分配仅导入其中一些导出：

import { a } from 'module'
import { a, b } from 'module'

为方便起见，你可以使用 as 重命名任何导入(import)：

import { a, b as two } from 'module'

你可以按名称 导入(import) 默认导出(default export) 和任何 非默认导出(non-default export)，例如常见的 React 导入：

import React, { Component } from 'react'

你可以在 查看 ES 模块的示例。

跨域资源共享 CORS

通过 CORS 获取模块，意味着如果你从其它域名引入脚本，他们必须有一个有效的 CORS 头允许跨站点加载（像 Access-Control-Allow-Origin: *）。

不支持模块的浏览器怎么办？

结合使用 type=module 和 nomodule：

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

总结

ES模块是现代浏览器中引入的最大功能之一。 他们是ES6的一部分，但实施它们的道路还很漫很长。

我们现在可以使用它们了！ 但我们还必须记住，拥有多个模块会对我们的页面产生性能影响，因为这是浏览器必须在运行时执行的一步。

即使 ES 模块已经浏览器中可用，可很大程度上依然要依靠 ，但是直接用语言构建这样的功能对于统一模块在客户端和 Node.js 上的工作方式来说是巨大的挑战。

更多完整的 ES6 Modules(模块) 介绍请查看 ES6 Modules(模块)系统及语法详解