模块化方案：CommonJs & ESModule

CommonJs (cjs)

• cjs 是 Node 的模块化规范，使用 require & exports 进行导入导出

• cjs 可作用于 node 环境 & webpack 环境，但不可作用浏览器

• 如果前端项目在 webpack 中，也可以理解为浏览器和 Node 都支持

  有些模块只支持 cjs，比如 ms，但并不影响它在前端项目中使用 ( 通过 webpack )
  但是，如果通过 cdn 的方式直接在浏览器中引入，则会出问题

/* cjs1.js */
module.exports = 10; // 导出一个数值
console.log("cjs1.js");

/* cjs2.js */
const num = require("./cjs1"); // 导入数据
console.log("cjs1", num); // cjs1 10
1
2
3
4
5
6
7

• cjs 为动态加载，可通过变量 require 数据

require(`./${a}`);
1

详细介绍见：CommonJs

ESModule (esm)

• esm 是 ES6 的模块化规范，使用 import & export 进行导入导出
• Node 及浏览器均支持 esm

/* esm1.js */
export let age = 18;
console.log("esm1.js");

/* esm2.js */
import { age } from "./esm1.js";
console.log(age); // 18
1
2
3
4
5
6
7

• esm 为静态导入，可在编译期进行 Tree Shaking，减少 js 体积
• 正因 esm 为静态导入，不能通过变量 import 数组

// 报错
import { 'f' + 'oo' } from 'my_module'; // 不能使用 [表达式] 接收导入数据

// 报错
let module = 'my_module';
import { foo } from module; // 不能使用 [变量] 作为被导入文件的路径

// 报错：不能在语句内进行导入
if (true)
    import { foo } from 'module1';
1
2
3
4
5
6
7
8
9
10

• 如需动态导入，esm 也可使用 import("./module.js") 进行导入

详细介绍见：ESModule

cjs & esm

1. cjs 输出的是值的拷贝，esm 输出的是值的引用
   ∴ 数据源更新后，esm 导出的数据也会被更新

2. cjs 是运行时加载，esm 是编译时加载
   ∴ esm 的导入语句 import 会自动提升

3. cjs 是动态加载，esm 是静态加载
   ∴ esm 不可以通过变量导入数据