es6模块是个什么东西？如何使用才是对的？

这首诗（提问）将详尽地如是说呵呵 JavaScript 中组件的引入和求出

概要

晚期的 Web 中文网站主要由 HTML 和 CSS 共同组成。如果有任何人 JavaScript 的标识符须要在网页中继续执行，一般来说是以小的标识符短片的方式来提供更多机能和互动性。结论就是一般来说 JavaScript 的标识符单厢被撰写在两个文档中，接着通过 script 条码读取到网页中。合作开发者可以将 JavaScript 标识符拆分为数个 js 文件，但大部份 JavaScript 表达式和表达式单厢被加进到自上而下返回值中。

但随著 Angular、React 和 Vue等 Web 架构控制技术的发展，因此绝大部分公司都在合作开发高阶 Web 应用领域而非图形界面应用领域，JavaScript 就显得愈来愈重要了。将能F83E43Se的标识符方法论PCB成公用标识符，因此在防止自上而下重新命名内部空间环境污染的大前提下，将其模组化，而此市场需求就成为的是必要性。

ECMAScript 2015规范化引入了容许采用 import 和 export 句子的 modules 基本概念。在本讲义中，你将自学甚么是 JavaScript 组件和怎样采用 import 和export 管理工作标识符内部结构。

模组化程式设计

在 JavaScript 引入模组化基本概念以后，当合作开发者想将标识符PCB时，须要建立数个文档并将这些文档镜像为原则上的JAVA。译者为的是表明而此点，建立了两个实例：index.html 文档和三个 JavaScript 文档，functions.js 和script.js。

index.html 文档将表明三个位数的和，差，平方根和商的结论，并在JAVA条码中镜像到三个 JavaScript 文档。 在图形界面器中增建 index.html 并加进下列标识符：

该 HTML 将在 h2 条码中表明表达式 x 和 y 的值，并在其下 p 元素中表明这些表达式的运算值。元素 id 属性为的是方便 script.js 文档中的 DOM 操作，script.js 文档还会设置 x 和 y 的值。更多 HTML 相关内容可以参考我的怎样采用 HTML 建立中文网站系列文章。

functions.js 文档则提供更多第二个JAVA中将要采用到的数学表达式。打开 functions.js 文档并加进下列内容：

最后，script.js 文档将计算出 x 和 y 的值，并表明结论：

完成上述操作之后, 可以在浏览器中打开 index.html 查看运行结论:

对于只有少量 script 文档的中文网站应用领域，这是个很高效的标识符拆分方案。然而，这种做法会存在一些问题：

在 ES6 将原生组件基本概念加进到 JavaScript 语言以后，社区尝试了几种解决方案。第两个解决方案就是通过普通的 JavaScript 对象实现的，比如将大部份标识符写在objects 或者立即调用的表达式表达式（IIFE）并将它们放在自上而下中返回值中的单个对象中。这是对多JAVA方法的一种改进，但仍然会存在将至少两个对象放入自上而下名称内部空间的相同问题，因此始终没有解决数个JAVA之间共享标识符的问题。

之后，出现了一些模组化解决方案：CommonJS，是在 Node.js实现的同步读取组件的方法，异步组件定义（AMD）则是非同步读取组件，还有通用组件定义（UMD），旨在成为能支持两种读取模式的通用的解决方案

这些解决方案的出现使得合作开发者更容易地以 package 的方式共享和重用标识符，这些组件也可以被转发和共享，例如一些能在npm上找到的 packages。但, 由于有如此多的解决方案因此没有两个是 JavaScript 原生的，所以为的是能在浏览其中采用组件，一些相应的工具出现了，比如Babel、Webpack 和 Browserify。

由于多文档方案存在许多问题，因此所提出的解决方案很复杂，因此合作开发者对将模组化程式设计引入 JavaScript 语言很感兴趣。因此，ECMAScript 2015 支持 JavaScript 组件的采用。

两个组件是一段可以为其他组件提供更多表达式机能的标识符块，同时也可以依赖别的组件里的机能。组件中 exports用以求出， imports 用来引用。组件之所以有用，是因为它们容许合作开发者F83E43Se标识符，它们提供更多许多合作开发者可以采用的稳定、一致的接口，因此它们还不会环境污染自上而下重新命名内部空间。

组件（有时称为 ECMAScript 组件或 ES 组件）现在可以在 JavaScript 中直接采用，在本讲义的剩余部分中，你将探索怎样在标识符中采用和实现它们。

原生 JavaScript 组件

JavaScript 中的组件采用 import 和 export 关键字:

为的是演示怎样采用组件的引入求出，请将 functions.js 文档中表达式采用组件求出。在每个表达式的前面加进 export 关键字，这可以让求出的表达式在其他组件采用。

将下列的标识符加进到文档中：

现在，在 script.js 中，你可以在 functions.js 文档的顶部采用 import 从其他组件引入标识符。

注意：import 必须始终位于文档的顶部。在这个例子中因此还必须采用相对路径（本示例为 ./）。

将下列标识符加进到 script.js 中：

请注意，通过在花括号中重新命名单个表达式来引入它们。

为的是确保此标识符作为组件而不是常规JAVA读取，请在 index.html 中的 script 条码中加进 type =”module”。任何人采用 import 或 export 的标识符都必须采用这个属性：

刷新网页以重新读取标识符，这时网页就会采用组件进行读取。虽然浏览器对组件的支持度很高，但我们可以通过caniuse 检查不同浏览器的支持度。请注意，如果将文档作为本地文档的的直链，就会遇到这个错误：

由于跨域资源共享，组件必须在服务器环境中采用，可以本地采用http-server 也可以通过托管服务提供更多商在 Internet 上进行设置。

组件与常规JAVA的区别：

组件也会经常与打包工具（如 Webpack）一起采用，以增加对浏览器的支持和一些附加机能，但它们也可以直接在浏览器中采用。

接下来，我们将探索更多采用 import 和 export 语法的方式。

按名称求出

如前所述，采用 export 语法将容许分别引入按名称求出的值。例如，采用下列简化版本的 function.js：

这将容许采用花括号按名称引入 sum 和 difference：

也可以采用别名来重重新命名该表达式以防止在同一组件中重新命名冲突。在此实例中，sum 将重重新命名为 add，difference 将重重新命名为 subtract。

在这里调用 add() 将产生 sum() 表达式的结论。

采用 * 语法，可以将整个组件的内容引入到两个对象中。在下面这种情况下，sum 和 difference 将成为 mathFunctions 对象上的方法。

基础类型、表达式表达式、表达式定义式、异步表达式、类和类的实例也可以被求出，只要它们具有标识符即可：

大部份这些 exports 都可以成功地 import。 下一小节我们将探讨的另一种求出类型 —— 默认求出。

默认求出

在前面的实例中，我们进行了数个重新命名的求出，并将它们分别引入或者作为两个对象进行了引入，和也尝试了将求出看做两个对象，每次求出均作为该对象的方法。组件也可以采用关键字 default 包含默认求出。默认求出不是采用大括号引入，而是直接引入到重新命名标识符中。

例如，将下列内容加进至 functions.js 文档：

在 script.js 文档中，你可以采用下列命令将默认表达式引入为 sum：

这很危险，因为在引入过程中对默认求出的重新命名没有任何人限制。在下面这个例子中，默认表达式被引入为 difference，尽管它实际上是 sum 表达式：

因此，一般来说首选应该采用按重新命名求出。与按重新命名求出不同，默认求出不须要标识符 —— 基础类型的值或匿名表达式都可以用作默认求出。下面是用作默认求出的对象的实例：

你可以采用下列命令将其作为 book 引入：

同样地，下面例子展示了箭头表达式的默认求出：

可以像下面这样引入 script.js 中的箭头表达式：

按重新命名求出和默认求出可以同时采用，比如在下面这个组件中，求出三个重新命名值和两个默认值：

我们可以采用下列标识符引入这些表达式和默认表达式：

现在，默认值和重新命名值都可以在 script 中采用。

总结

模组化程式设计设计实践可以将标识符拆分到原则上的组件中，从而提高标识符的F83E43Se率和一致性，同时还可以保护全局重新命名内部空间不被环境污染。模组化接口可以用原生 JavaScript 的关键字 import 和 export 来实现。

通过本文的自学，你了解了 JavaScript 中组件的历史、怎样将 JavaScript 文档分离为数个JAVA和怎样采用模组化方法按重新命名的 import、export 和默认的 import、export 语法来更新这些文档。

了解更多有关 JavaScript 中组件的信息，请阅读 Mozilla Modules。如果你想探索 Node.js 中的组件，可以阅读 How To Create a Node.js Module tutorial。