正文

ESM 和 CJS 是我們常用的模塊格式，兩種模塊系統(tǒng)具有不同的語(yǔ)法和加載機(jī)制。在項(xiàng)目中，我們可能會(huì)遇到 ESM 和 CJS 轉(zhuǎn)換的場(chǎng)景：

• ESM 引入只支持 CJS 的庫(kù)
• 開(kāi)發(fā) npm 庫(kù)的時(shí)候，寫(xiě) ESM 然后編譯成 CJS。
• ……

最近在項(xiàng)目中也剛好遇到的轉(zhuǎn)換上的一些問(wèn)題，于是就研究了一下

本文將介紹 ESM 和 CJS 之間轉(zhuǎn)換，幫助大家加深對(duì)它們的了解，并從中了解它們之間轉(zhuǎn)換的細(xì)節(jié)與局限性

ESM 轉(zhuǎn) CJS

ESM 轉(zhuǎn) CJS 的使用場(chǎng)景非常常見(jiàn)，例如：

• npm 庫(kù)，需要同時(shí)提供 ESM 和 CJS，供開(kāi)發(fā)者自行選擇使用。一般是用 ESM 開(kāi)發(fā)，然后同時(shí)輸出 ESM 和 CJS
• 使用 ESM 進(jìn)行開(kāi)發(fā)，但最后由于兼容性、性能等原因，編譯成 CJS 在線上運(yùn)行。例如：利用 Vite、webpack 等構(gòu)建工具進(jìn)行開(kāi)發(fā) 開(kāi)發(fā)

各大工具，如 TSC、Babel、Vite、webpack、Rollup 等，都自帶了 ESM 轉(zhuǎn) CJS 的能力。

export 的轉(zhuǎn)換

• 情況一，只有默認(rèn)導(dǎo)出：

export default 666

Rollup 會(huì)轉(zhuǎn)換成

modules.exports = 666

很好理解，modules.exports 導(dǎo)出的整個(gè)東西就是默認(rèn)導(dǎo)出嘛

用 CJS 引用該模塊的方式：

const lib = require('lib')
console.log(lib)
// 666

• 情況二，只有命名導(dǎo)出：

export const a = 123
export const b = 234

轉(zhuǎn)換成

module.exports.a = 123
module.exports.b = 234

命名導(dǎo)出用 module.exports.xxx 一個(gè)個(gè)導(dǎo)出就行

用 CJS 引用該模塊的方式：

const {a, b} = require('lib')
console.log(a, b)
// 123 234

• 情況三：默認(rèn)導(dǎo)出和命名導(dǎo)出同時(shí)存在

export default 666
export const a = 123
export const b = 234

這時(shí)候會(huì)發(fā)現(xiàn)，前面兩種情況的轉(zhuǎn)換思路不能用了，你不能這樣轉(zhuǎn)換

modules.exports = 666
module.exports.a = 123
module.exports.b = 234

畢竟 modules.exports 不是對(duì)象，因此設(shè)置不了屬性。

那莫得辦法了，只能這樣表示了：

• module.exports.default 為默認(rèn)導(dǎo)出
• module.exports.xxx 其他為命名導(dǎo)出

為了跟前兩種情況做區(qū)分，因此還要新增一個(gè)標(biāo)記__esModule

于是就會(huì)編譯成這樣的代碼：

+ Object.defineProperty(exports, '__esModule', { value: true })
+ module.exports.default = 666
- module.exports = 666
module.exports.a = 123
module.exports.b = 234

用 CJS 引用該模塊的方式：

const lib = require('lib')
console.log(lib.default, lib.a, lib.b)
// 666 123 234

在這種情況下，必須要用 .default 訪問(wèn)默認(rèn)導(dǎo)出

但這樣子看起來(lái)非常的別扭，但是沒(méi)有辦法，混用默認(rèn)導(dǎo)出和命名導(dǎo)出是有代價(jià)的。

為什么我們項(xiàng)目中，從來(lái)就遇到過(guò)該問(wèn)題？

一般情況下，我們使用 ESM 寫(xiě)項(xiàng)目，然后編譯成 CJS

假如，我們寫(xiě)的代碼引用了上述的代碼（默認(rèn)導(dǎo)出和命名導(dǎo)出混用）:

// foo.js
import lib from 'lib'
import {a, b} from 'lib'
console.log(lib, a, b)

這段代碼，會(huì)被轉(zhuǎn)換成：

'use strict';
var lib = require('lib');
function _interopDefault (e) { 
  return e && e.__esModule ? e : { default: e }; 
}
var lib__default = /*#__PURE__*/_interopDefault(lib);
console.log(lib__default.default, lib.a, lib.b);

_interopDefault 函數(shù)會(huì)自動(dòng)根據(jù) __esModule，將導(dǎo)出對(duì)象標(biāo)準(zhǔn)化，使 .default 一定為默認(rèn)導(dǎo)出

• 如果有 __esModule，那就不用處理
• 沒(méi)有 __esModule，就將其放到 default 屬性中，作為默認(rèn)導(dǎo)出

工具在轉(zhuǎn)譯 lib.js 的同時(shí)，也會(huì)轉(zhuǎn)譯引入它的 foo.js，會(huì)加上標(biāo)準(zhǔn)化 require 對(duì)象的邏輯。

我們的項(xiàng)目，在編譯的時(shí)候，全部 ESM 模塊都轉(zhuǎn)為 CJS（不是只轉(zhuǎn)換一個(gè)，不轉(zhuǎn)另外一個(gè)） ，在這個(gè)過(guò)程中它自動(dòng)屏蔽了模塊默認(rèn)導(dǎo)出的差異，由于編譯工具已經(jīng)幫我們處理好，因此我們沒(méi)有任何感知。

如果我們直接寫(xiě) CJS，去引入 ESM 轉(zhuǎn)換后的 CJS，就需要自行處理該問(wèn)題

要想盡量避免這種情況，建議全部都使用命名導(dǎo)出，由于沒(méi)有默認(rèn)導(dǎo)出，就不需要擔(dān)心默認(rèn)導(dǎo)出是 module.exports 還是 module.exports.default，都用以下方式進(jìn)行引入即可：

const {a, b} = require('lib')

這樣開(kāi)發(fā)者在任何情況下都沒(méi)有心智負(fù)擔(dān)。

import 的轉(zhuǎn)換

其實(shí)上一小節(jié)已經(jīng)講了

import lib from 'lib'
import {a, b} from 'lib'
console.log(lib, a, b)

會(huì)被轉(zhuǎn)換成

'use strict';
var lib = require('lib');
function _interopDefault (e) { 
  return e && e.__esModule ? e : { default: e }; 
}
var lib__default = /*#__PURE__*/_interopDefault(lib);
console.log(lib__default.default, lib.a, lib.b);

加上 _interopDefault，屏蔽了不同情況下默認(rèn)導(dǎo)出的差異，因此如果所有代碼都是從 ESM 轉(zhuǎn) CJS，就不用擔(dān)心默認(rèn)導(dǎo)出的差異問(wèn)題。

小結(jié)

其實(shí) ESM 轉(zhuǎn) CJS，不同的工具的輸出會(huì)稍微有些不同。以上是 Rollup 的的轉(zhuǎn)換方式，個(gè)人認(rèn)為這種更為簡(jiǎn)潔，而 TSC 的轉(zhuǎn)換則更復(fù)雜。

不過(guò)這些工具的思路都是相同的，都遵守 __esModule 的約定，標(biāo)記 __esModule 的模塊默認(rèn)導(dǎo)出是 .default

ESM 轉(zhuǎn) CJS 有哪些局限性？

存在以下情況可能無(wú)法進(jìn)行轉(zhuǎn)換：

• 存在循環(huán)依賴(lài)
• import.meta，這個(gè)特性只能在 ESM 中使用

CJS 轉(zhuǎn) ESM

CJS 轉(zhuǎn) ESM 的場(chǎng)景不多，一般不會(huì)用 CJS 寫(xiě) npm 庫(kù)然后輸出 ESM；用 CJS 寫(xiě)的庫(kù)，當(dāng)時(shí)不會(huì)輸出 ESM。新寫(xiě)的 npm 庫(kù)，一般來(lái)說(shuō)也是用 ESM 寫(xiě)。

因此一般只有寫(xiě) ESM 項(xiàng)目，引入了一個(gè)只有 CJS 的庫(kù)時(shí)，且編譯出 ESM 時(shí)，才會(huì)用到 CJS 轉(zhuǎn) ESM。

為什么我們用 webpack 寫(xiě) ESM，然后引入 CJS 的時(shí)候，基本上沒(méi)遇到什么問(wèn)題？

要運(yùn)行 ESM 引入 CJS 的代碼，有兩種方式：

• 把 ESM 轉(zhuǎn) CJS，然后運(yùn)行 CJS
• 把 CJS 轉(zhuǎn)成 ESM，然后運(yùn)行 ESM

因?yàn)?webpack 是前者，ESM 轉(zhuǎn) CJS 能夠很好地進(jìn)行轉(zhuǎn)換。

CJS 轉(zhuǎn) ESM，沒(méi)有一種統(tǒng)一的轉(zhuǎn)換標(biāo)準(zhǔn)（相對(duì)來(lái)說(shuō)，ESM 轉(zhuǎn) CJS 有 __esModule 約定），不同的工具和庫(kù)，可能轉(zhuǎn)換出來(lái)的結(jié)果是不一樣的，可能會(huì)導(dǎo)致代碼不兼容。

export 的轉(zhuǎn)換

場(chǎng)景一：

module.exports = {
    a: 3,
    b: 4
}

Rollup 會(huì)轉(zhuǎn)換成

var lib = {
    a: 3,
    b: 4
};
export { lib as default };

module.exports 會(huì)被當(dāng)做默認(rèn)導(dǎo)出

而 esbuild 會(huì)這樣轉(zhuǎn)換

var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_lib = __commonJS({
  "src/cjs/lib.js"(exports, module) {
    module.exports = {
      a: 3,
      b: 4
    };
  }
});
export default require_lib();

esbuild 會(huì)給代碼包一層輔助函數(shù)，然后將代碼搬過(guò)去就好了。好處是，這樣編譯工具就不需要考慮代碼的真正意義，直接簡(jiǎn)單包一層即可

這種情況下，雖然 Rollup 和 esbuild 轉(zhuǎn)換的代碼不太相同，但代碼的運(yùn)行結(jié)果是相同的

場(chǎng)景二：

exports.c =123

Rollup 會(huì)轉(zhuǎn)換成：

var lib = {};
var c = lib.c =123;
export { c, lib as default };

Rollup 會(huì)轉(zhuǎn)換成默認(rèn)導(dǎo)出和命名導(dǎo)出。

esbuild 則轉(zhuǎn)換成：

var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_lib = __commonJS({
  "src/cjs/lib.js"(exports) {
    exports.d = 666;
  }
});
export default require_lib();

仍然是包一層輔助函數(shù)，但 esbuild 全部都當(dāng)做默認(rèn)導(dǎo)出

在這種情況下，Rollup 和 esbuild 轉(zhuǎn)換的代碼，其運(yùn)行結(jié)果是不同的

場(chǎng)景三：

exports.d = 123
module.exports = {
    a: 3,
    b: 4
}
exports.c =123

exports.d = 123 其實(shí)是無(wú)效的

Rollup 會(huì)編譯成這樣：

var libExports = {};
var lib$1 = {
  get exports(){ return libExports; },
  set exports(v){ libExports = v; },
};
(function (module, exports) {
	exports.d =123;
	module.exports = {
	    a: 3,
	    b: 4
	};
	exports.c =123;
} (lib$1, libExports));
var lib = libExports;
export { lib as default };

此時(shí) Rollup 也會(huì)加上一層輔助函數(shù)

而 esbuild 仍然是加一層輔助函數(shù)

var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_lib = __commonJS({
  "src/cjs/lib.js"(exports, module) {
    exports.d = 666;
    module.exports = {
      a: 3,
      b: 4
    };
    exports.c = 666;
  }
});
export default require_lib();

輔助函數(shù)的好處之前也說(shuō)了，不需要關(guān)注代碼邏輯，可以看到，即使 exports.d = 666; 是一行無(wú)效語(yǔ)句，照樣執(zhí)行也是沒(méi)有問(wèn)題的，不需要先分析出代碼的語(yǔ)義。

總體對(duì)比下來(lái)，esbuild 的處理還是相對(duì)簡(jiǎn)單的

require 的轉(zhuǎn)換

const lib = require('./lib')
const {c} = require('./lib')
console.info(lib,c)

Rollup 轉(zhuǎn)換成：

import require$$0 from './lib';
const lib = require$$0;
const {c} = require$$0;
console.info(lib,c);

require 的轉(zhuǎn)換比較簡(jiǎn)單，不管你解不解構(gòu)，反正我就只有默認(rèn)引入

而 esbuild。。。還不支持，干脆就報(bào)錯(cuò)了

小結(jié)

為什么工具的轉(zhuǎn)換結(jié)果是不同的？

CJS 轉(zhuǎn)換成 ESM 是有歧義的

module.export.a = 123
module.export.b = 345

等價(jià)于

module.export = {
    a: 123,
    b: 345,
}

那么它是默認(rèn)導(dǎo)出，還是命名導(dǎo)出呢？都行

本質(zhì)上，是因?yàn)?CJS 只有一個(gè)導(dǎo)出方式，不確定它對(duì)應(yīng)的是 ESM 的命名導(dǎo)出還是默認(rèn)導(dǎo)出。

用一個(gè)形象點(diǎn)的例子就是，女朋友回了一句哦，但是你不知道女朋友是想說(shuō)肯定的意思，還是表示無(wú)語(yǔ)的意思、還是其他別的意思。。。

對(duì)于 require

const {c} = require('./lib')

你說(shuō)這個(gè)是默認(rèn)導(dǎo)入呢？還是命名導(dǎo)入？好像也都行。。。

正是由于這個(gè)歧義，且沒(méi)有一個(gè)標(biāo)準(zhǔn)去規(guī)范這個(gè)轉(zhuǎn)換行為，因此不同工具的轉(zhuǎn)換結(jié)果是不同的

CJS 轉(zhuǎn)換成 ESM 有哪些局限性？

• 不同工具的轉(zhuǎn)換結(jié)果不同
• CJS 模塊可以使用 require.resolve 方法查找模塊的路徑，而 ESM 模塊不可以
• CJS 模塊可以導(dǎo)入和導(dǎo)出非 JavaScript 文件，例如 JSON
• CJS 在運(yùn)行時(shí)導(dǎo)入導(dǎo)出，支持運(yùn)行時(shí)改變導(dǎo)入導(dǎo)出的內(nèi)容，以下代碼是合法的：

module.exports.a = 123
if( Date.now() % 2){
    module.exports.b = 234
}

由于沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)，CJS 轉(zhuǎn) ESM 的工具，相對(duì)來(lái)說(shuō)少了很多，目前僅有少量工具能夠進(jìn)行轉(zhuǎn)換，esbuild、babel-plugin-transform-commonjs、@rollup/commonjs。

有時(shí)候 Vite 使用一些 CJS 包不兼容，也是因?yàn)橛行?CJS 轉(zhuǎn)不了 ESM。但幸運(yùn)的是，目前大部分常見(jiàn)的 npm 包，都已經(jīng)支持 ESM，或者能夠比較好的被轉(zhuǎn)換成 ESM，因此也不需要太擔(dān)心 Vite 的問(wèn)題。

以上就是教你徹底搞懂ESM與CJS互相轉(zhuǎn)換的詳細(xì)內(nèi)容，更多關(guān)于ESM與CJS互相轉(zhuǎn)換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論