JavaScript 最初只是一種簡(jiǎn)單的語(yǔ)言，用于使靜態(tài)網(wǎng)站更具活力和交互性。然而，用 JavaScript 編寫的項(xiàng)目在很久以前就開始變得越來(lái)越復(fù)雜。

正因?yàn)槿绱耍覀兒芸炀桶l(fā)現(xiàn)需要一種方法來(lái)將代碼分解成更小、更易于管理的片段。

多年來(lái)，人們對(duì)如何實(shí)現(xiàn)將 JavaScript 代碼拆分成模塊有很多不同的想法。在本文中，我們將比較最流行的幾種方法：ECMAScript 模塊 (ESM) 和 CommonJS。

CommonJS

Node.js 的創(chuàng)建者知道，代碼需要組織成可重用的模塊。然而，當(dāng) Node.js 于 2009 年首次推出時(shí)，JavaScript 還沒有正式的模塊系統(tǒng)。因此，Node.js 引入了 CommonJS 模塊。

創(chuàng)建和導(dǎo)出模塊

在 Node.js 中，每個(gè)文件都是一個(gè)獨(dú)立的模塊。要開始使用 CommonJS，讓我們用一個(gè)簡(jiǎn)單的函數(shù)創(chuàng)建一個(gè)新文件。

sum.js

function sum(numberOne, numberTwo) {
  return numberOne + numberTwo;
}
 
module.exports = { sum };

在每個(gè)文件中，module 變量都代表當(dāng)前模塊。我們可以使用 module.exports 來(lái)讓其他模塊導(dǎo)入和使用 sum 函數(shù)。

導(dǎo)入模塊

要導(dǎo)入模塊，我們需要使用 require 函數(shù)并提供正確的路徑。

const { sum } = require('./sum');
console.log(sum(1, 2)); // 3

CommonJS 還支持 import 函數(shù)，它允許我們異步導(dǎo)入模塊。

import('./sum.js')
  .then(({ sum }) => {
    console.log(sum(1, 2)); // 3
  })

ECMAScript Modules

JavaScript 語(yǔ)言進(jìn)行了一次重大升級(jí)，即 ES6 或 ECMAScript 2015。除其他功能外，它還包括模塊管理的官方語(yǔ)法，即 ECMAScript Modules (ESM)。

創(chuàng)建和導(dǎo)出模塊

我們必須使用導(dǎo)出關(guān)鍵字來(lái)公開模塊中的各種值。

sum.js

function sum(numberOne, numberTwo) {
  return numberOne + numberTwo;
}
 
export { sum };

使用上述語(yǔ)法，我們可以導(dǎo)出任意多個(gè)值。此外，模塊還可以包含一個(gè)默認(rèn)導(dǎo)出。

subtract.js:

function subtract(numberOne, numberTwo) {
  return numberOne - numberTwo;
}
 
export default subtract;

導(dǎo)入和導(dǎo)出模塊

要導(dǎo)入 ECMAScript 模塊，我們必須使用 import 關(guān)鍵字。

import { sum } from './sum.js';
import subtract from './subtract.js';
 
console.log(sum(3, 2)); // 5
console.log(subtract(3, 2)); // 1

請(qǐng)注意，我們使用略有不同的語(yǔ)法來(lái)導(dǎo)入默認(rèn)導(dǎo)出。重要的是，默認(rèn)導(dǎo)入使用的名稱不必與默認(rèn)導(dǎo)出一致。

import sum from './subtract.js';

這也是有些人不喜歡使用默認(rèn)出口的原因之一。

ESM 還支持導(dǎo)入功能，允許我們異步導(dǎo)入模塊。

import('./sum.js')
  .then(({ sum }) => {
    console.log(sum(1, 2)); // 3
  })

ECMAScript 模塊的兼容

雖然 ECMAScript 模塊是在 2015 年左右推出的，但社區(qū)還是花了一段時(shí)間才跟上步伐。不過(guò)，現(xiàn)在我們甚至可以在瀏覽器中原生使用 ESM。

webpack 等捆綁程序多年前就開始支持 ECMAScript 模塊。它們可以將我們?cè)诙鄠€(gè) JavaScript 文件中使用 ESM 的代碼轉(zhuǎn)換成單個(gè)文件輸出。它還可以將捆綁包拆分成多個(gè)文件，以提高性能。

Node.js 在 8.5.0 版左右開始嘗試支持 ESM。不過(guò)當(dāng)時(shí)要使用它，我們必須包含 --experimental-modules 模塊。在 13.2.0 版中，他們?nèi)∠嗽谑褂?Node 模塊時(shí)使用該標(biāo)志的要求。

不過(guò)，在 Node.js 中使用 ESM 仍然會(huì)在終端中出現(xiàn)警告，提示該功能是試驗(yàn)性的。自 2020 年 4 月發(fā)布 14.0.0 版后，該警告不再出現(xiàn)。

要在 Node.js 中使用 ESM，我們可以在 package.js 中添加 "type"（類型）和 "module"（模塊）："模塊"。

有趣的是，如果您習(xí)慣于使用 Webpack 等工具，那么 Node.js 中的 ESM 實(shí)現(xiàn)可能會(huì)略有不同。我們必須提供導(dǎo)入模塊的完整路徑，包括文件擴(kuò)展名。

TypeScript 中的 ECMAScript 模塊

早在 2015 年的 TypeScript 1.5 中，TypeScript 就開始支持 ECMAScript Modules 語(yǔ)法。需要了解的是，它默認(rèn)將我們的代碼移植到使用 CommonJS 的引擎蓋下。

import { sum } from './sum';
 
sum(1, 2);

使用默認(rèn)配置將上述文件轉(zhuǎn)換為 JavaScript 時(shí)，我們可以看到 CommonJS。

"use strict";
exports.__esModule = true;
var sum_1 = require("./sum");
(0, sum_1.sum)(1, 2);

TypeScript 添加了 __esModule 標(biāo)記，以表明文件是從 ESM 編譯到 CommonJS 的。

要在 TypeScript 和 Node.js 中使用 ESM，我們需要稍微修改一下 tsconfig.json 文件。

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "NodeNext",
    "outDir": "dist"
  }
}

由于使用了 NodeNext，TypeScript 將使用 ESM 導(dǎo)入和導(dǎo)出，而不是 CommonJS。請(qǐng)務(wù)必記住，Node.js 要求我們提供導(dǎo)入模塊的完整路徑。

當(dāng)我們使用希望在 Node.js 環(huán)境中運(yùn)行的 TypeScript 時(shí)，也必須這樣做。

與直覺相反的是，即使我們?cè)诰帉?TypeScript 代碼，也必須提供包含 .js 擴(kuò)展名的路徑。

import { sum } from './sum.js';
 
console.log(sum(1, 2));

完成所有這些后，我們就可以擁有一個(gè)在 Node.js 中運(yùn)行并在引擎蓋下使用 ECMAScript 模塊的 TypeScript 應(yīng)用程序。

管理依賴關(guān)系

在處理依賴關(guān)系時(shí)，在 CommonJS 和 ECMAScript 模塊之間做出選擇的問題會(huì)變得更加復(fù)雜。

使用 ECMAScript 模塊的項(xiàng)目可以使用導(dǎo)入語(yǔ)法使用 CommonJS 模塊。但是，使用 CommonJS 的項(xiàng)目除了通過(guò)異步導(dǎo)入函數(shù)外，不能以任何方式導(dǎo)入僅使用 ESM 的模塊。

正因?yàn)槿绱?，許多使用 ECMAScript 編寫 JavaScript 庫(kù)的開發(fā)人員決定同時(shí)發(fā)布 CommonJS 和 ESM 代碼。

這樣，他們的庫(kù)就可以兼容任何一種模塊系統(tǒng)。

然而，并非所有開發(fā)人員都愿意處理發(fā)布同時(shí)適用于 CommonJS 和 ESM 的軟件包的麻煩。

只發(fā)布與 ESM 兼容的庫(kù)版本的做法越來(lái)越流行。

因此，我們需要了解 CommonJS 和 ESM 的工作原理及其局限性。

總結(jié)

在本文中，我們介紹了 CommonJS 和 ECMAScript 模塊的工作原理。我們了解了它們的語(yǔ)法以及如何在 Node.js 和 TypeScript 中使用它們。

由于并非所有開發(fā)人員都愿意費(fèi)盡周折地發(fā)布同時(shí)適用于 CommonJS 和 ESM 的包，因此了解這兩種模塊系統(tǒng)之間的區(qū)別變得越來(lái)越重要。

有了這些知識(shí)，我們才能更好地為項(xiàng)目選擇合適的模塊系統(tǒng)，并適應(yīng)與之相關(guān)的任何挑戰(zhàn)。