简单的JavaScript ES6 vs require()导入

Question

我正准备通过babel使用ES6模块导入/导出，但是在本文中遇到了这个令人困惑的语句。

:

ES6的import和export结合require()方法的强大功能，使我们可以自由地将所有客户端代码组织到模块中，同时使用新版本JavaScript的所有功能编写代码。

这使它听起来像ES6的系统和require()服务于两个不同的目的，从而使这个babel/browserify方法是最好的一个。我的理解是，他们都做同样的事情，只是有一点不同。有人能解释一下吗?

Answer 1

这个说法是矛盾的。如果你进入ES6/ES7，你不会想要使用CommonJS样式的require，但你总是想要使用import异步加载模块。

事实上，ES6/ES7有一个可编程的方式来导入模块:System.import(...)，但加载器规范仍在讨论中…

在获得推荐状态之前，有一个填充(还有更多…):SystemJS.

从现在开始，我将避免任何其他模块加载语法，因为几年后，您的代码将完全可以在标准Web浏览器中执行，只需进行一些修改。

OP在一些评论中问道…

为什么js模块需要System.import(…ES6有导入/导出模块加载功能吗?他们不是执行相同的任务?

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!
   });
}