如果我使用 ES6 模块，我还需要模块加载器吗？答案

【问题标题】：Do I still need a module loader if I'm using ES6 modules?如果我使用 ES6 模块，我还需要模块加载器吗？
【发布时间】：2017-03-10 22:42:38
【问题描述】：

不幸的是，我对JavaScript 模块加载器的了解仍在增长，我正在尝试了解它们与新的ES6 Modules 的关系。据我所知，使用CommonJS 或RequireJS 之类的模块加载器，使用ES5 兼容JavaScript 确实需要使用异步模块加载器来提高性能，并且仅在需要时使用相应的模块加载器的语法进行加载。

但是查看ES6 module documentation 并阅读其他信息，在我看来，模块加载是通过import 和export 关键字原生支持的。如果是这种情况，我是否更正 ES6 JS modules 本身支持异步模块加载，因此我不需要使用像 CommonJS 或 RequireJS 这样的额外工具？

【问题讨论】：

小心使用native这个词——在什么情况下是native？ import/export 语句尚未在浏览器/节点等中得到官方支持，但受 Babel (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) 等转译器的支持
@Supersharp 在旗帜后面，确定吗？浏览器模块加载规范尚未最终确定，所以如果这是主线，我会感到惊讶

标签： javascript ecmascript-6 es6-module-loader es6-modules

【解决方案1】：

在我看来，模块加载是通过 import 和 export 关键字原生支持的。

不完全是。 import 和 export 声明只定义了每个模块的依赖关系和接口。它们允许静态提取命名所需模块的字符串，仅此而已。

如果是这种情况，我是否不需要使用其他工具，例如 CommonJS 或 RequireJS？

没有。您仍然需要为 ES6 模块使用加载器，它将名称或路径或任何从 imports 解析为实际模块文件并使用依赖于实现的方法加载它们。

有许多可用的工具或工具链，不同解决方案的示例是

webpack：将所有内容捆绑到一个大脚本中
System.js：动态和异步加载单个模块（类似于 require.js 所做的）
原生：node.js 和 Web 浏览器仍在研究如何在不使用额外库的情况下支持模块加载
babel 转译：您可以将 ES6 模块转换为 AMD 或 CommonJS 格式，并使用 require.js 等已知工具进行这些操作

【讨论】：

只是为了根据我的理解完成循环，如果我没有使用像上面那样的动态模块加载器，那意味着我会受到老派的影响引用我的index.html 文件中需要的每个单独的.js 模块文件的方式（或者如果我捆绑和缩小可能是单个文件）？
@atconway 实际上，老式 <script> 包含对 modules 根本不起作用，它会尝试将它们解析为老式脚本会失败。您需要将模块捆绑到单个脚本中。
我应该澄清一下——不是<script>标签中的单个模块，而是转译的.jsES5文件（我使用TypeScript）必须单独引用或捆绑的版本正确吗？
IIRC，“ES5 模块”表示 commonjs 语法，因此单独引用它们是行不通的。要么捆绑它们，要么使用像 require.js 这样的 commonjs 加载器。

【解决方案2】：

据我了解，ES6 支持定义和导入模块的语法。导入所需模块的实际行为是基础设施的工作。

在现代浏览器中（截至 2016 年）没有内置功能来支持模块加载，因此您仍然需要 SystemJS 之类的东西来进行实际加载。

【讨论】：

浏览器是否支持模块加载？

【解决方案3】：

ES6 JavaScript 文件本质上被视为一个模块。如果您在 .js 文件中定义任何内容，它将仅在该文件中可见（本地范围）。 export 的作用是，它公开定义为导出的类/变量，对外部可见。然后您可以将其导入另一个模块。还有其他定义模块的方法，例如使用 Commonjs 或 AMD 等。如果要动态延迟加载模块，则需要模块加载器。前任。 Systemjs 就是这样一个动态模块加载器。它会在请求时从服务器动态获取物理模块文件，并防止多次加载同一个文件。在过去的 SPA 应用程序中，必须在开始时加载所有内容才能工作。使用动态模块加载器，我们现在可以只拥有完成预期工作所需的文件。希望这会对你有所帮助。

https://github.com/systemjs/systemjs

【讨论】：