js模块化

模块化主要为了解决js的变量作用域问题

模块化的好处

1. 避免命名冲突(减少命名空间污染)
2. 更好的分离, 按需加载
3. 更高复用性
4. 高可维护性

常见的方案

• commonjs

• amd（Require.js）

• cmd（sea.js）

• es6

几种构建格式

CJS

1. node模块化的主要解决方案
2. require同步加载模块
3. require和module.exports
4. node运行
5. require才加载
6. 输出值是值的拷贝

AMD

1. 全称Asynchronous Module Definitio
2. 依赖requireJS的异步加载解决方案
3. 主要在浏览器端使用

CMD

1. 全称Commin Module Definition
2. 依赖SeaJS的异步加载解决方案

UMD

• amd，cjs 和 iife 合体
• 兼容浏览器和node
• Node.js 同步加载，浏览器端异步加载。

EJS、ESM

1. 输出值是值的引用
2. 即是ES6 模块，类库打包以供摇树
3. 编译时加载

iife

rollup立即执行函数格式，给浏览器使用

system

SystemJS 加载器格式

F&Q

AMD和CMD的差异

对模块加载的处理不同

ES6 模块与 CommonJS 模块的差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时就能确定模块的依赖关系以及输入和输出的变量
3. CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

其他

1. import加载commonjs模块只能整体加载不能按需摇树

摇树

摇树是一种依赖 ESM 模块静态分析实现的功能，它可以在编译时安全的移除代码中未使用的部分。