RequireJS用得很多了, 但是CommonJS和ES6的模塊還沒有系統(tǒng)地學習過, 經(jīng)常看到各式各樣的require和import, 有些暈, 特此總結(jié).
這里對比的是:
- 來自CommonJS的
require - 來自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其實都是使用了這些局部變量.
這里有個小問題, 那exports和module.exports有什么區(qū)別?
參考我的另一篇文章CommonJS中exports和module.exports的區(qū)別
require加載分為5步:
- 解析 (Resolution): node內(nèi)部解析文件的路徑
- 加載 (Loading): 從對應(yīng)路徑加載文件
- 包裹 (Wrapping): 使用上面的代碼包裹拉取來的文件
- 運算 (Evaluation): 由VM運算文件中的內(nèi)容
- 緩存 (Caching)
因此, 在Evaluation之前, node是無法知道一個CommonJS的Module里面導出了那些符號的, 這是其與ESM最大的不同.
ESM import的依賴解析
ESM是語法層面(Lexical)上的實現(xiàn), 在代碼被Evaluate之前就可以知道那些變量被導出了. 當ESM模塊被詞法解析時, 交給VM運算之前, 它會內(nèi)部構(gòu)建一個Module Record結(jié)構(gòu), 其中記錄了一個導出變量的列表. 對于import {f} from "foo", 它自動建立了一個本地局部的f和foo模塊內(nèi)部的f之間的映射.
因此, 導入導出變量中的不匹配, 在代碼運行之前就會被發(fā)現(xiàn)并報錯.
總結(jié)
| require | import | |
|---|---|---|
| 來源 | CommonJS | ESM (ECMAScript Modules) |
| 實現(xiàn)手段 | 函數(shù)包裹 | 語法層面 |
| 導出符號時間 | 運行時 | 解析時 |
| 報錯時間 | 運行時 | 解析時 |
