Node.js: CJS、バンドラー、ESM の簡単な歴史
導入
Node.js 開発者であれば、おそらく cjs モジュールと esm モジュールについて聞いたことがあるでしょうが、なぜ 2 つあるのか、Node.js アプリケーションでこれらがどのように共存するのかはよくわからないかもしれません。このブログ投稿では、Node.js の JavaScript モジュールの歴史を簡単に説明します (例付き ?)。これにより、これらの概念をより自信を持って扱うことができます。
グローバルスコープ
当初、JavaScript にはグローバル スコープのみがあり、すべてのメンバーが宣言されていました。 2 つの独立したファイルがメンバーに同じ名前を使用する可能性があるため、コードを共有する場合、これは問題でした。例:
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パッケージ
Node.js 開発は、開発者が再利用可能な JavaScript コードを公開および利用できるようにした npm パッケージのおかげで人気が爆発的に高まりました。 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 は Web ブラウザと互換性がないという大きな欠点がありました。この問題を解決するために、バンドラーの概念が生まれました。 browserify は、基本的にエントリ ポイントをトラバースし、require() で処理されたすべてのコードを Web ブラウザと互換性のある単一の .js ファイルに「バンドル」することで機能する最初のバンドラーでした。時間が経つにつれて、追加の機能と差別化要因を備えた他のバンドラーが導入されました。最も注目すべきは、webpack、parcel、rollup、esbuild、vite (時系列順)。
ECMAScript モジュール
Node.js および cjs モジュールが主流になるにつれて、ECMAScript 仕様の管理者はモジュールの概念を含めることを決定しました。これが、ネイティブ JavaScript モジュールが ESModules または esm (ECMAScript モジュールの略) とも呼ばれる理由です。
esm は、メンバーをエクスポートおよびインポートするための新しいキーワードと構文を定義し、デフォルトのエクスポートなどの新しい概念を導入します。時間が経つにつれ、esm モジュールには動的 import() やトップレベルの await などの新しい機能が追加されました。例:
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>
esm は、esm 構文を cjs に変換できるため、バンドラーや TypeScript などの言語のおかげで、開発者に広く採用されるようになりました。
Node.js cjs/esm の相互運用性
需要の高まりにより、Node.js はバージョン 12.x で正式に esm のサポートを追加しました。 cjs との下位互換性は次のように実現されました:
- Node.js は、package.json が「type」プロパティを「module」に設定しない限り、.js ファイルを cjs モジュールとして解釈します。
- 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 モジュールではトップレベルの await が許可されるのに対し、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"
}
「exports」プロパティをサポートしていない Node.js バージョンとの下位互換性のために、「main」が cjs バージョンをどのように指しているかに注目してください。
結論
cjs および esm モジュールについて知っておく必要があるのは (ほぼ) これだけです (2024 年 12 月時点?)。以下からご意見をお聞かせください!
以上がNode.js: CJS、バンドラー、ESM の簡単な歴史の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1668
14
1427
52
1329
25
1273
29
1256
24
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
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は、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
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が含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
