代码拆分如何与导入/导出以及babel和webpack一起使用？

通常，如何与babel或webpack或浏览器一起使用？

Babel和Webpack遵循ES规范，并将import/export语句转换为一个文件。由于它们还支持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源的唯一方法是使用多个<script>标签并使用全局对象交换功能。那太丑了。

然后发明了Nodejs，他们需要一种更好的方法来处理模块并发明了require()东西。

规范的作者看到为此需要本机语法，因此介绍了import/ export。

然后，Babel和其他人写了翻译。