简单 JavaScript ES6 与 require() 导入

Question

我正准备通过 babel 使用 ES6 模块 import/export 但在这个 article.

中遇到了这个令人困惑的陈述

它指出：

The power of ES6’s import and export combined with the require() method, gives us the freedom to organize all of the client-side code into modules and at the same time write the code using all the power of the new version of JavaScript.

这听起来像是 ES6 的系统，require() 有两个不同的目的，因此 babel/browserify 方法是最好的方法。我的理解是他们都做同样的事情，只是有点不同。谁能帮忙解释一下？

Answer 1

这个说法自相矛盾。如果你进入 ES6/ES7，你将不想使用 CommonJS 风格的 require，但你总是希望使用 import 异步加载模块].

事实上，ES6/ES7 有一种导入模块的编程方式：System.import(...)，但 loader specification 仍在讨论中...

在获得推荐状态之前，有一个 polyfill（而且不止于此...）：SystemJS.

从现在开始我会避免使用任何其他模块加载语法，因为您的代码在几年内只需稍加修改就可以在标准 Web 浏览器中完美执行。

OP 在一些评论中问...

Why will System.import(...) from ES6 be needed for js modules when we have the ES6 import/export module loading capabilities? Aren't they performing the same tasks?

import语句只能在代码文件的顶部。有时您知道根据执行某种逻辑要加载哪些文件，而 import 语法不支持条件。

例如，假设您有一个需要插件的应用程序，并且某些选项有一个名为 loadPlugins 的标志，可以是 true 或false。因此，如果应用程序需要加载它们，您将需要加载它们：

if(options.loadPlugins) {
   Promise.all(
      options.plugins.map(plugin => System.import(plugin.path))
   ).then(() => {
      // Do stuff when all plugins have been already loaded!
   });
}

简单 JavaScript ES6 与 require() 导入

Simple JavaScript ES6 vs require() importing

javascript

ecmascript-6

browserify

babeljs

javascript-import

OP 在一些评论中问...