模块化

多人开发中

• 命名空间冲突
• 模块复用
• 提高代码可维护性

CommonJS

• Node.js 是基于 CommonJS 来实现的，同步导入文件，
• 是值的导出，后面值发生变化需要重新导入
• 运行时加载

ESModule 是引用的导出

• 静态分析，进行 treeshaking,(没有真正引入的模块代码并移除的能力)
• 编译时输出
• export default 默认导出是一个值，export { a } 批量导出是一个地址

let x = 10;
let y = 20;
setTimeout(() => {
  x = 100;
  y = 200;
}, 10);

export { x };
export default y;

AMD

require(['',''], function(a,b){ a.add(); b.add() })

CMD

defined(function(require, exports, module){ var a = require('a'); })

export

//-------------a.js---------------------
export default "hello";

//-------------index.js---------------------
console.log(_); // hello 可以打印出来, 函数提升类似
import _ from "./a.js";
// if () {
// 		console.log(import _ from './a.js') // ❌ 只能放到最外层作用域
// }
console.log(_); /// hello;
_ = "word"; // ❌ 不能修改导出后的结果

异步导入

let btn = document.createElement("button");
btn.addEventListener("click", function () {
  import("./d.js").then((res) => {
    // import 返回是一个 promise，结果返回带 default
    console.log(res.default); // import * as res from './d.js'
  });
});
document.body.appendChild(btn);

• AMD: 同步加载完之后执行，模块与模块之间是串行的加载的
• CMD: 异步模块加载器：按需加载后执行，异步加载但是如果有依赖关系的还是串行的
• SEA: 依赖加载优化，静态分析依赖关系，同步并行加载