Javascript 代码拆分如何与导入/导出、babel和webpack一起工作？

我试着回答

何时使用导入/导出以及何时使用require（）/module.exports？但当我试图挖掘时，它似乎变得复杂了

这是我的理解

• require（）/module.exports:这是模块系统的nodejs实现。这将同步加载模块
• 使用es6，我们可以使用导入/导出。说

import语句用于导入由另一个模块导出的绑定。无论您是否声明导入的模块，它们都处于严格模式。除非嵌入式脚本具有type=“module”，否则不能在嵌入式脚本中使用import语句

问题1：这在巴别塔、网页包或浏览器中通常是如何工作的

在探索过程中，我遇到了CommonJs、requireJs、异步模块定义（AMD）等东西

问题2：我更感兴趣的是了解时间表，以及这些东西是如何在javascript中演变的

一般来说，这在babel、webpack或浏览器中是如何工作的

Babel和Webpack遵循ES规范，将

导入

/

导出

语句传输到单个文件中。由于它们还支持

require

语法，它们通常将

import

语句传输到

require（）

调用和

export

语句传输到

module exports

，然后附带模块的自定义加载程序。例如，如果您得到：

 // A.js
 export default function() { }

 // B.js
 import A from "./A";
 A();

然后将其转换为以下

require

语法：

 //A.js
 exports.default = function() {};

 //B.js
 var A = require("./A").default;
 A();

然后可以包装成这样：

 (function() { // prevent leaking to global scope
   // emulated loader:
   var modules = {};

   function require(name) { return modules[name]; }

   function define(name, fn) {
     var module = modules[name] = { exports: {} };
     fn(module, module.exports, require);
   }


  // The code:
  define("A", function(module, exports, require) {
      // A.js
     exports.default = function() { };
  });

  define("B", function(module, exports, require) { 
    // B.js
   var A = require("A").default;
    A();
  });
 })();

这些东西在javascript中是如何演变的

几年前，编写JS仅限于浏览器，加载多个JS源的唯一方法是使用多个

标记并使用全局对象交换功能。那太难看了

后来Nodejs被发明了，他们需要一种更好的方式来处理模块，并发明了

require（）

东西

规范的编写者认为需要一种本地语法，因此引入了

import

/

export

---

巴贝尔和其他人随后编写了transpilers。

捆绑包的Web包功能如下：

您可以在配置文件中指定一个输入文件

您可以在配置文件中指定一个输出文件

Webpack将查看输入文件

需要的所有文件

（commomJS模块系统）或

导入的所有文件

（ES6模块系统）。然后，它通过加载程序根据文件名扩展名导入代码加载程序可以将单个文件传输到浏览器可以理解的代码中。加载程序的一个示例是babel或sass/scss编译器

在使用加载程序传输不同的文件后，插件可以同时工作 将生成的代码的包转换为其他内容。捆绑包只是一堆代码，它们一起构成了一部分功能

在中，我们不会对webpack的内部内容进行太深入的讨论，但最重要的是要了解：

---

您可以使用webpack将代码拆分为多个文件，这使它们更易于维护和使用。但是，客户端请求所有这些文件会对性能造成严重影响（许多HTTP请求的开销）。因此，我们将这些文件绑定到一个或多个文件中，以减少此开销。

通常，如果您使用像webpack这样的绑定器，或使用Babel进行翻译，则应使用导入/导出语法编写所有现代代码。。。npm模块可能支持require/module语法，但您仍然可以导入它们

另外值得注意的是

import（）

方法，它返回一个承诺，该承诺应该解析为异步导入的根模块。如果您配置了Webpack，则它可以将这些组件打包为异步模块

实际上，通过babel和webpack等工具进行的解析将退回到针对

node_模块的节点样式行为

lookup，其中标准是传输路径，倾向于相对路径。每个环境都有额外的支持

---

您可以在现代浏览器和当前节点中试验esm支持（在回答此问题时的标志后面）。这些行为有些不一致，但定义良好。如果有疑问，请尝试。

“何时使用require（）/module.exports？”-永远不要。或者：仅在遗留应用程序中。嘿@Bergi解释？拜托。ES6模块在几乎所有方面都要好得多，除了本机支持。