为什么我们在前端框架而不是CommonJS中使用ES6模块进行导入

Question

Create-React-App使用Babel将我的ES6模块转换为CommonJS模块，并且Webpack会将所有内容捆绑在我的浏览器可以理解的单个文件中。

1）为什么不直接使用CommonJS模块并将Webpack用作捆绑程序？

2）现在浏览器支持ES6模块，为什么我们不将React CommonJS模块转换为ES6模块。

Answer 1

CommonJS代码不允许您使用导入，箭头功能，解构，生成器，类等编写代码。这使您的开发人员的工作变得轻松，我确实看到了以下优点：

相同功能的代码更少。 编写相同功能所需的时间更少。

从chrome 61开始，您可以处理您的ES6代码，但其他浏览器将不支持它。 因此，您需要将ES6代码转换为通用js代码，以使其在浏览器之间保持一致。

Answer 2

转到您的Chrome控制台并输入require ，您将收到require not defined消息。

我们的浏览器，特别是Chrome，不知道什么是CommonJS，也不知道什么是模块。

但是，如果您希望消除项目中的那些限制，则可以使用Electron。

如果您在Electron浏览器窗口中运行require ，则会得到以下信息：

f require(path) {
  try {
    exports.requireDepth += 1;
    return mod.require(path);
  } finally {
    exports.requireDepth -= 1;
  }
}

Chrome浏览器不知道上面是什么，但是Electron浏览器窗口可以。 它具有Chrome所没有的一些其他功能。

Electron浏览器有一个MainWindow对象，该对象可以访问Nodejs运行时所属的所有可用模块，也可以访问浏览器内部的所有模块。 因此，可以访问CommonJS以及fs，crypto等。

您可以执行`require（'fs'）并直接从Electron浏览器控制台访问文件系统。

简而言之，我是说，使用Electron，您可以直接在所需的模块中提出要求，而不必使用Webpack。