今天小編給大家分享一下Node的CJS與ESM有哪些不同點的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比城東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式城東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋城東地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

一、并不完美的 ESM 支持

1.1 在 Node 中使用 ESM

Node 默認只支持 CJS 語法，這意味著你書寫了一個 ESM 語法的 js 文件，將無法被執(zhí)行。

如果想在 Node 中使用 ESM 語法，有兩種可行方式：

• ⑴ 在 package.json 中新增 "type": "module" 配置項。

• ⑵ 將希望使用 ESM 的文件改為 .mjs 后綴。

對于第一種方式，Node 會將和 package.json 文件同路徑下的模塊，全部當作 ESM 來解析。

第二種方式不需要修改 package.json，Node 會自動地把全部 xxx.mjs 文件都作為 ESM 來解析。

同理，如果在 package.json 文件中設(shè)置 "type": "commonjs"，則表示該路徑下模塊以 CJS 形式來解析。 如果文件后綴名為 .cjs，Node 會自動地將其作為 CJS 模塊來解析（即使在 package.json 中配置為 ESM 模式）。

我們可以通過上述修改 package.json 的方式，來讓全部模塊都以 ESM 形式執(zhí)行，然后項目上的模塊都統(tǒng)一使用 ESM 語法來書寫。

如果存在較多陳舊的 CJS 模塊懶得修改，也沒關(guān)系，把它們?nèi)颗驳揭粋€文件夾，在該文件夾路徑下新增一個內(nèi)容為 {"type": "commonjs"} 的 package.json 即可。

Node 在解析某個被引用的模塊時（無論它是被 import 還是被 require），會根據(jù)被引用模塊的后綴名，或?qū)?yīng)的 package.json 配置去解析該模塊。

1.2 ESM 引用 CJS 模塊的問題

ESM 基本可以順利地 import CJS 模塊，但對于具名的 exports（Named exports，即被整體賦值的 module.exports），只能以 default export 的形式引入：

/** @file cjs/a.js **/
// named exports
module.exports = {
    foo: () => {
        console.log("It's a foo function...")
    }
}


/** @file index_err.js **/
import { foo } from './cjs/a.js';  
// SyntaxError: Named export 'foo' not found. The requested module './cjs/a.js' is a CommonJS module, which may not support all module.exports as named exports.
foo();


/** @file index_err.js **/
import pkg from './cjs/a.js';  // 以 default export 的形式引入
pkg.foo();  // 正常執(zhí)行

1.3 CJS 引用 ESM 模塊的問題

假設(shè)你在開發(fā)一個供別人使用的開源項目，且使用 ESM 的形式導出模塊，那么問題來了 —— 目前 CJS 的 require 函數(shù)無法直接引入 ESM 包，會報錯：

let { foo } = require('./esm/b.js');
              ^

Error [ERR_REQUIRE_ESM]: require() of ES Module BlogDemo3\220220\test2\esm\b.js from BlogDemo3\220220\test2\require.js not supported.
Instead change the require of b.js in BlogDemo3\220220\test2\require.js to a dynamic import() which is available in all CommonJS modules.
    at Object. (BlogDemo3\220220\test2\require.js:4:15) {
  code: 'ERR_REQUIRE_ESM'
}

按照上述錯誤陳述，我們不能并使用 require 引入 ES 模塊（原因會在后續(xù)提及），應(yīng)當改為使用 CJS 模塊內(nèi)置的動態(tài) import 方法：

import('./esm/b.js').then(({ foo }) => {
    foo();
});

// or

(async () => { 
    const { foo } = await import('./esm/b.js'); 
})();

開源項目當然不能強制要求用戶改用這種形式來引入，所以又得借助 rollup 之類的工具將項目編譯為 CJS 模塊……

由上可見目前 Node.js 對 ESM 語法的支持是有限制的，如果不借助工具處理，這些限制可能會很糟心。

對于想入門前端的新手來說，這些麻煩的規(guī)則和限制也會讓人困惑。

截至我落筆書寫本文時， Node.js LTS 版本為 16.14.0，距離開始支持 ESM 的 13.2.0 版本已過去了兩年多的時間。

那么為何 Node.js 到現(xiàn)在還無法打通 CJS 和 ESM？

答案并非 Node.js 敵視 ESM 標準從而遲遲不做優(yōu)化，而是因為 —— CJS 和 ESM，二者真是太不一樣了。

二、CJS 和 ESM 的不同點

2.1 不同的加載邏輯

在 CJS 模塊中，require() 是一個同步接口，它會直接從磁盤（或網(wǎng)絡(luò)）讀取依賴模塊并立即執(zhí)行對應(yīng)的腳本。

ESM 標準的模塊加載器則完全不同，它讀取到腳本后不會直接執(zhí)行，而是會先進入編譯階段進行模塊解析，檢查模塊上調(diào)用了 import 和 export 的地方，并順騰摸瓜把依賴模塊一個個異步、并行地下載下來。

在此階段 ESM 加載器不會執(zhí)行任何依賴模塊代碼，只會進行語法檢錯、確定模塊的依賴關(guān)系、確定模塊輸入和輸出的變量。

最后 ESM 會進入執(zhí)行階段，按順序執(zhí)行各模塊腳本。

所以我們常常會說，CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

在上方 1.2 小節(jié)，我們曾提及到 ESM 中無法通過指定依賴模塊屬性的形式引入 CJS named exports：

/** @file cjs/a.js **/
// named exports
module.exports = {
    foo: () => {
        console.log("It's a foo function...")
    }
}

/** @file index_err.js **/
import { foo } from './cjs/a.js';  
// SyntaxError: Named export 'foo' not found. The requested module './cjs/a.js' is a CommonJS module, which may not support all module.exports as named exports.
foo();

這是因為 ESM 獲取所指定的依賴模塊屬性（花括號內(nèi)部的屬性），是需要在編譯階段進行靜態(tài)分析的，而 CJS 的腳本要在執(zhí)行階段才能計算出它們的 named exports 的值，會導致 ESM 在編譯階段無法進行分析。

2.2 不同的模式

ESM 默認使用了嚴格模式（use strict），因此在 ES 模塊中的 this 不再指向全局對象（而是 undefined），且變量在聲明前無法使用。

這也是為何在瀏覽器中，