WEB 前端模块化，读文笔记

文章链接

WEB 前端模块化都有什么？

知识点

1. 根据平台划分
   浏览器 AMD、CMD 存在网络瓶颈，使用异步加载
   非浏览器 CommonJS 直接操作 IO，同步加载

2. 浏览器
   AMD 依赖前置 requirejs
   CMD 就近依赖 seajs

AMD 与 CMD 都是在页面初始化时加载完成所有模块，唯一的区别就是就近依赖是当模块被 require 时才会触发执行。

3. CommonJS 的模块，是一个对象

   console.log('b.js ', require('./a.js').x);
   可以看成console.log('b.js', moduleA.x);
   在第二步中moduleA.x赋值为a1，于是输出b.js, a1

4. 保留字
   CommonJS require exports / module.exports
   ES6 require export / import

模块输出 加载方式
CommonJS 值拷贝 对象
ES6 引用（符号链接） 静态解析

怎么理解 值拷贝和引用拷贝？
值拷贝，相当于，在引用的文件中，a 是 require 进来的，但是使用a ，实际上是 b = a, 我们实际上用的是 b
引用拷贝，在引用文件中，我们引用了a , 对a的修改也生效

静态解析：ES6 不需要和 CommonJS 一样，需要把整个文件加载进去，形成一个对象之后，才能知道自己有什么，而是在编写代码的过程中，代码是什么，它就是什么。

UMD = AMD + CommonJS

5. webpack
   webpack 在定义模块上，可以支持 CommonJS、AMD 和 ES6 的模块声明方式，换句话说，就是你的模块如果是使用 CommonJS、AMD 或 ES6 的语法写的，webpack 都支持