了解一下ES module 和 Commonjs

最近测试了几个 ES module 和 Commonjs 的例子，理解了之前不太理解的概念，记录一下。要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码，不会贴所有验证的代码。

Commonjs require 大概流程

本质上 Commonjs 一直是 node 在使用的规范，虽然其他平台也可以使用。

处理路径，node 有专门的 path 模块和__dirname 等，将路径转成绝对路径，定位目标文件
检查缓存
读取文件代码(fs)
包裹一个函数并执行（自执行函数）
缓存
返回 module.exports

ES module 大概流程

最重要的应该是解析依赖了，ES module 如果都是同步的，会很慢。都说 ES module 是异步的，在不同环境会有不同的结果。其实 ES module 的三个步骤是可以分开异步进行。在浏览器，会使用 HTML 的规范，最后的实例化是同步，在 node 环境，文件都是在本地，同步就显得很容易。

模块解析，入口文件开始，构建 Module Record，然后放置到 Module Map。Module Map 相当于每一个 js 文件，Module Record 相当于里面依赖的每一个 import
获取文件，解析文件，进行 JavaScript 的解析，变量提升等
实例化，执行文件内容

exports 与 module.exports

Commonjs 可以用 exports.xxx 导出，也可以用 module.exports = {}导出，因为整个文件读取之后会包裹到一个自执行函数，差不多是这样：

(function(exports, require, module, filename, dirname){

})(exports, require, module, filename, dirname)

如果直接 exports = {}那么导出是无效的。下面三个例子就可以很好的理解：

function fn(obj){
  obj.num = 2;
};
let obj = {
  num: 1;
};
fn(obj);
console.log(obj);


function fn(obj){
  obj = {num: 2};
};
let obj = {
  num: 1;
};
fn(obj);
console.log(obj);


function fn(obj){
  obj = 2;
};
let obj = 1;
fn(obj);
console.log(obj);

对象是指针的引用，相当于 obj = xxxx，用 obj.xx 赋值其实就是给指针 xxxx 指向的对象赋值，如果 obj = {}，相当于 obj 的指针改变了，相当于 obj = xx，所以 exports = {}是无效的。

ES module 是值的引用，Commonjs 是值的拷贝

这块其实挺好实验的，导出一个变量，调用函数改变这个变量再输出，可以得到 Commonjs 的值是不会因为执行了 add 就改变，ES module 就会：

let a = 10;
exports.a = a;
exports.add = () => {
  a++;
};

let a = 10;
export const b = a;
exports.add = () => {
  a++;
};

ES module 是编译时输出，Commonjs 是运行时加载

运行时加载也比较好实验（个人观点这样可以表示是运行时加载）：

main.js
let a = require('./a.js');
let b = require('./b.js');

a.js
exports.a = 'a';
let b = require('./b.js');
exports.aa = 'aa';

b.js
let a = require('./a.js');
console.log(a,'in b.js');

这样去执行的时候，b.js 里面的 a 是{a: ‘a’}，如果把 exports.aa = ‘aa’;放到 let b = require(‘./b.js’);之前，b.js 里面的 a 是{a: ‘a’, aa: ‘aa’}。

所以 Commonjs 是一边运行一边加载，当 a.js 执行到 let b = require(‘./b.js’);的时候，之前的代码是执行过了，并缓存起来，这时候就会去加载 b.js 并执行。

ES module 是编译时输出

不太确定是否能这样理解：

index.js
import {c} from './c.js';


c.js
import {d} from './d.js';
export let c = 'c';


d.js
import {c} from './c.js';
console.log(c,'in d.js');
export const d = 'd';

得到的结果会报错：Cannot access ‘c’ before initialization，如果 let c 改成 var c，结果是 undefined in d.js。

ES module 会有一个跟 JavaScript 解析一样的过程，先是解析整个 js，做一些变量提升，然后再执行。就是说会先加载所有的文件，并且解析，不会执行，在所有依赖文件加载解析完成，再开始执行。所以我是这样去理解的 ES module 是编译时输出。

ES module 和 Commonjs 循环引用的区别

这点其实挺重要的，ES module 和 Commonjs 都是通过缓存来解决循环引用的问题，不会造成死循环。Commonjs 是运行时加载，在解析到 require 的时候，会先检查缓存，如果没有，会先进行缓存再继续往下执行:

main.js
require('./a.js');

a.js
let b = require('./b.js');
exports.a = 'a';
console.log('a.js', b);

b.js
let a = require('./a.js');
console.log('b.js', a);
exports.b = 'b';

result:
b.js {}
a.js { b: 'b' }

大概流程：

main.js require(‘./a.js’); 检查缓存，没有 a.js，执行 a.js
a.js，检查缓存，没有，缓存 a.js。执行 let b = require(‘./b.js’);，检查缓存，没有 b.js，执行 b.js
b.js，检查缓存，没有 b.js，缓存 b.js。执行 let a = require(‘./a.js’);，检查缓存，有 a.js，获取缓存，打印获取的缓存，b.js 缓存加上 b: ‘b’
回到 a.js，a.js 缓存加上 a: ‘a’，打印

所以 Commonjs 多次引入和循环引入的解决方案，是先缓存，再根据执行的内容新增缓存的内容，而且只会执行一次。

ES module 解决多次引入和循环引入也是依赖缓存，但是缓存的机制不一样。ES module 是值的引用和编译时输出，ES module 导出的是内存地址的索引：

index.js
import {c} from './c.js';

c.js
import {d} from './d.js';
console.log(d,'in c.js');
export var c = 'c';

d.js
import {c} from './c.js';
console.log(c,'in d.js');
export const d = 'd';

result
undefined in d.js
d in c.js

当解析到 d.js 的 import {c} from ‘./c.js’;，会去 module map 检查是否有 c moduel record，有，建立模块指向。当依赖解析完成之后，代码也解析完成了，最后实例化运行代码，所以 d.js 执行的时候 c 是 undefined。

ES module 动态引入 import()

Commonjs 的 require 可以是动态的，也不一定要放在顶层，ES module 的 import 就必须放在最顶层。动态加载在实际应用场景是必须的，对于性能方面有非常大的提升。最典型的就是路由懒加载，如果不是有动态 import，打包出来的是一个文件，首次加载会非常慢。还有是一些条件语句决定是否加载某些文件，对性能也非常友好。

tree shaking

ES module 可以实现 tree shaking，核心就是 ES module 是编译时输出，新进行编译再执行，编译过程就能确定哪些内容是无用的，Commonjs 就无法实现，只有在执行过程中才知道哪些内容是无用的。

node 执行 ES module

如果文件后缀是.mjs（node 执行的后缀是.cjs），那么 node 会根据 ES module 规范去执行，如果是 js，那么 package.json 里面要新增"type": “module”，否则会报错：

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Cannot use import statement outside a module

也可以配置 exports 做兼容，exports 优先级高于 main：

"exports": {
    "import": "./src/index.js",
    "require": "./src/index.cjs"
  }

require 寻找引入的顺序

先看是否是内置包，如果是直接返回；看是否是相对路径，是就处理成可识别绝对路径，如果找不到就报错；不是内置包没有相对路径，从当前目录开始寻找 node_modules，找不到依次往上的目录寻找 node_modules，直到根目录，还找不到就报错。会先以文件名找，再依次是.js、.json、.node。

欢迎关注订阅号 coding个人笔记