RequireJS用得很多了, 但是CommonJS和ES6的模塊還沒有系統(tǒng)地學(xué)習(xí)過, 經(jīng)?？吹礁魇礁鳂拥?code>require和import, 有些暈, 特此總結(jié).

這里對(duì)比的是:

1. 來自CommonJS的require
2. 來自ESM (ECMAScript Modules)的import

語法

CommonJS require

// dep.js
dep = {
    foo: function(){},
    bar: 22
}
module.exports = dep;

// app.js
var dep = require("dep");
console.log(dep.bar);
dep.foo();

ESM import

// dep.js
export foo function(){};
export const bar = 22;

// app.js
import {foo, bar} from "dep";
console.log(bar);
foo();

依賴解析

CommonJS require的依賴解析

Node.js使用的是CommonJS模式. 它將require的代碼用函數(shù)包裹起來, 如下:

function (exports, require, module, __filename, __dirname) {
  const m = 1;
  module.exports.m = m;
}

可以看到exports, require, module都是局部變量, 你代碼中的require()和module.exports其實(shí)都是使用了這些局部變量.

這里有個(gè)小問題, 那exports和module.exports有什么區(qū)別?
參考我的另一篇文章CommonJS中exports和module.exports的區(qū)別

require加載分為5步:

1. 解析 (Resolution): node內(nèi)部解析文件的路徑
2. 加載 (Loading): 從對(duì)應(yīng)路徑加載文件
3. 包裹 (Wrapping): 使用上面的代碼包裹拉取來的文件
4. 運(yùn)算 (Evaluation): 由VM運(yùn)算文件中的內(nèi)容
5. 緩存 (Caching)

因此, 在Evaluation之前, node是無法知道一個(gè)CommonJS的Module里面導(dǎo)出了那些符號(hào)的, 這是其與ESM最大的不同.

ESM import的依賴解析

ESM是語法層面(Lexical)上的實(shí)現(xiàn), 在代碼被Evaluate之前就可以知道那些變量被導(dǎo)出了. 當(dāng)ESM模塊被詞法解析時(shí), 交給VM運(yùn)算之前, 它會(huì)內(nèi)部構(gòu)建一個(gè)Module Record結(jié)構(gòu), 其中記錄了一個(gè)導(dǎo)出變量的列表. 對(duì)于import {f} from "foo", 它自動(dòng)建立了一個(gè)本地局部的f和foo模塊內(nèi)部的f之間的映射.

因此, 導(dǎo)入導(dǎo)出變量中的不匹配, 在代碼運(yùn)行之前就會(huì)被發(fā)現(xiàn)并報(bào)錯(cuò).

總結(jié)

參考

1. import vs require – ESM & commonJs module differences