模块化主要为了解决js的变量作用域问题
模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
常见的方案
-
commonjs
-
amd（Require.js）
-
cmd（sea.js）
-
es6
几种构建格式
CJS
- node模块化的主要解决方案
require同步加载模块- require和module.exports
- node运行
- require才加载
- 输出值是值的拷贝
AMD
- 全称Asynchronous Module Definitio
- 依赖
requireJS的异步加载解决方案 - 主要在浏览器端使用
CMD
- 全称Commin Module Definition
- 依赖
SeaJS的异步加载解决方案
UMD
- amd，cjs 和 iife 合体
- 兼容浏览器和node
- Node.js 同步加载，浏览器端异步加载。
EJS、ESM
- 输出值是值的引用
- 即是ES6 模块，类库打包以供摇树
- 编译时加载
iife
rollup立即执行函数格式，给浏览器使用
system
SystemJS 加载器格式
F&Q
AMD和CMD的差异
对模块加载的处理不同
ES6 模块与 CommonJS 模块的差异
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
- CommonJS 模块是运行时加载，ES6 模块是编译时就能确定模块的
依赖关系以及输入和输出的变量 - CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。
其他
- import加载commonjs模块只能整体加载不能按需摇树
摇树
摇树是一种依赖 ESM 模块静态分析实现的功能，它可以在编译时安全的移除代码中未使用的部分。