Node.js：cjs、捆綁器和 esm 簡史-js教程-PHP中文網

首頁

web前端

js教程

Node.js：cjs、捆綁器和 esm 簡史

Mary-Kate Olsen

Dec 15, 2024 am 05:36 AM

Node.js: A brief history of cjs, bundlers, and esm

介紹

如果您是 Node.js 開發人員，您可能聽說過 cjs 和 esm 模組，但可能不確定為什麼有兩個模組以及它們如何在 Node.js 應用程式中共存。這篇部落格文章將簡要介紹 Node.js 中 JavaScript 模組的歷史（附有範例？），以便您在處理這些概念時更加自信。

全球範圍

最初，JavaScript 僅具有全域作用域，所有成員都已聲明。共享程式碼時這是有問題的，因為兩個獨立的檔案可能對成員使用相同的名稱。例如：

greet-1.js

function greet(name) {
  return `Hello ${name}!`;
}

登入後複製

greet-2.js

var greet = "...";

登入後複製

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

登入後複製

CommonJS 模組

Node.js 透過 CommonJS（也稱為 cjs）正式引入了 JavaScript 模組的概念。這解決了共享全域範圍的衝突問題，因為開發人員可以決定要導出什麼（透過 module.exports）和導入（透過 require()）。例如：

src/greet.js

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

登入後複製

src/main.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

登入後複製

npm 包

由於 npm 套件允許開發人員發布和使用可重複使用的 JavaScript 程式碼，Node.js 開發迅速流行。 npm 套件預設安裝在 node_modules 資料夾中。所有 npm 套件中存在的 package.json 檔案尤其重要，因為它可以透過「main」屬性指示 Node.js 哪個檔案是入口點。例如：

node_modules/greeter/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

登入後複製

node_modules/greeter/entry-point.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

登入後複製

src/main.js

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

登入後複製

捆綁者

npm 套件能夠利用其他開發人員的工作，從而大大提高了開發人員的工作效率。然而，它有一個主要缺點：cjs 與網頁瀏覽器不相容。為了解決這個問題，捆綁器的概念誕生了。 browserify 是第一個捆綁器，本質上是透過遍歷入口點並將所有 require() 程式碼「捆綁」到與 Web 瀏覽器相容的單一 .js 檔案中來運作的。隨著時間的推移，其他具有附加功能和差異化因素的捆綁器也被引入。最值得注意的是 webpack、parcel、rollup、esbuild 和 vite（按時間順序排列）。

ECMAScript 模組

隨著 Node.js 和 cjs 模組成為主流，ECMAScript 規範維護者決定納入模組概念。這就是為什麼原生 JavaScript 模組也被稱為 ESModules 或 esm（ECMAScript 模組的縮寫）。

esm 定義了用於匯出和匯入成員的新關鍵字和語法，並引入了預設匯出等新概念。隨著時間的推移，esm 模組獲得了新的功能，例如動態 import() 和頂級等待。例如：

src/greet.js

function greet(name) {
  return `Hello ${name}!`;
}

登入後複製

src/part.js

var greet = "...";

登入後複製

src/main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

登入後複製

隨著時間的推移，由於捆綁程式和 TypeScript 等語言，esm 被開發人員廣泛採用，因為它們能夠將 esm 語法轉換為 cjs。

Node.js cjs/esm 互通性

由於需求不斷增長，Node.js 在 12.x 版本中正式添加了對 esm 的支援。與 cjs 的向後相容性實作如下：

Node.js 將 .js 檔案解釋為 cjs 模組，除非 package.json 將「type」屬性設為「module」。
Node.js 將 .cjs 檔案解釋為 cjs 模組。
Node.js 將 .mjs 檔案解釋為 esm 模組。

當涉及 npm 套件相容性時，esm 模組可以使用 cjs 和 esm 入口點導入 npm 套件。然而，相反的情況也有一些警告。舉例：

node_modules/cjs/package.json

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

登入後複製

node_modules/cjs/entry.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

登入後複製

node_modules/esm/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

登入後複製

node_modules/esm/entry.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

登入後複製

以下運作正常：

src/main.mjs

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

登入後複製

但是，以下指令無法運作：

src/main.cjs

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
export function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

登入後複製

不允許這樣做的原因是因為 esm 模組允許頂層等待，而 require() 函數是同步的。可以重寫程式碼以使用動態 import()，但由於它會傳回一個 Promise，因此它強制具有如下所示的內容：

src/main.cjs

// default export: new concept
export default function part(name) {
  return `Goodbye ${name}!`;
}

登入後複製

為了緩解此相容性問題，一些 npm 套件透過利用帶有條件導出的 package.json 的「exports」屬性來公開 cjs 和 mjs 入口點。例如：

node_modules/esm/entry.cjs:

// notice the `.js` suffix is required
import part from "./part.js";

// dynamic import: new capability
// top-level await: new capability
const { greet } = await import("./greet.js");

// logs: Hello Alice!
console.log(greet("Alice"));

// logs: Bye Bob!
console.log(part("Bob"));

登入後複製

node_modules/esm/package.json:

{
  "name": "cjs",
  "main": "./entry.js"
}

登入後複製

注意「main」如何指向 cjs 版本，以便向後相容不支援「exports」屬性的 Node.js 版本。

結論

這（幾乎）是您需要了解的有關 cjs 和 esm 模組的全部資訊（截至 2024 年 12 月？）。請在下面告訴我你的想法！

以上是Node.js：cjs、捆綁器和 esm 簡史的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

Related knowledge

Python vs. JavaScript：學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

從C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中：現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

了解JavaScript引擎：實施詳細信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：社區，圖書館和資源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

Python vs. JavaScript：開發環境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

C/C在JavaScript口譯員和編譯器中的作用 Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

See all articles

Node.js：cjs、捆綁器和 esm 簡史

介紹

全球範圍

CommonJS 模組

npm 包

捆綁者

ECMAScript 模組

Node.js cjs/esm 互通性

結論

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題