Skip to main content

模块化

模块化第一阶段​

通过 立即调用的函数表达式(IIFE) 创建模块

模块化的第二阶段​

CommonJS / AMD / CMD

CommonJS​

  • 在 CommonJS 中每一个 js 文件都是一个单独的模块
  • 每个模块中包含 CommonJS 规范的三个核心变量:
    • module 记录当前模块信息
    • require 引入模块的方法
    • exports 当前模块导出的属性

特性：

  • 输出值的拷贝
  • 单个值导出，本质上导出的就是 exports 属性
  • require 同步加载模块，因此允许动态加载
  • 对每个加载的模块都会生成缓存
  • 可以有效的解决循环引用问题

nodejs 基于 CommonJS 的模块加载机制

模块化第三阶段​

ES Module​

  • 输出模块的只读引用。意思是 ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块
  • 通过 ES Module 导入的变量是只读的，即不能重新赋值修改
  • 静态分析，在编译时就完成模块加载，可以实现 Tree Shaking

循环引用参考 https://juejin.cn/post/6844903747290660878

export vs export default

参考 https://mrseawave.github.io/blogs/articles/2021/06/03/export-export-default/

export 可以有多个，且能修改

babel 编译后如下代码：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true,
});
exports.modifyFunc = modifyFunc;
exports.default = exports.e2 = void 0;
let e1 = "export 1";
let e2 = "export 2";
exports.e2 = e2;

function modifyFunc() {
  e1 = "export 1 modified";
  exports.e2 = e2 = "export 2 modified";
}

var _default = e1;
exports.default = _default;