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

【问题标题】：Why do we use ES6 modules for import in frontend frameworks instead of CommonJS为什么我们在前端框架中使用 ES6 模块而不是 CommonJS 进行导入
【发布时间】：2018-10-17 04:23:25
【问题描述】：

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

1) 为什么不直接使用 CommonJS 模块，使用 Webpack 作为打包器？

2) 既然浏览器支持 ES6 模块，为什么不将 React CommonJS 模块转译成 ES6 模块。

【问题讨论】：

这些决定取决于您自己（或您的组织）...Now that ES6 modules are supported in browsers Internet Explorer 是此声明的问题
只有最新版本的主流浏览器支持 ES6，但也有一部分人在使用旧版本。不更新东西的人因为他们不理解或不能被打扰，使用公司机器并且不允许更新的人，等等。ES5 是更安全的选择。如果你有一个特定的用户组并且知道他们在使用什么，你就不会这样做，就像你正在制作一个非公共网络应用程序并且你知道你所有的最终用户都在使用最新的 Chrome。

标签： javascript reactjs webpack ecmascript-6 babeljs

【解决方案1】：

转到您的 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，您可以直接在所需的模块中进行 require，而无需使用 Webpack。

【讨论】：

【解决方案2】：

CommonJS 代码不允许您使用导入、箭头函数、解构、生成器、类等来编写代码...这使您的开发人员的生活变得轻松，我确实看到了以下优势：

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

chrome 61 + 可以处理您的 ES6 代码，但其他浏览器将不支持它。所以需要将 ES6 代码转译成通用的 js 代码，以便跨浏览器保持一致。

【讨论】：