Node.jsがES6モジュールを処理する方法の詳細な説明

Node.jsがES6モジュールを処理する方法の詳細な説明

1. 2つのモジュールの違い

ES6 モジュールと CommonJS モジュールには大きな違いがあります。

構文的には、CommonJS モジュールは require() を使用してロードされ、module.exports を使用してエクスポートされますが、ES6 モジュールは import と export を使用します。

使用法としては、require() は同期ロードであり、後続のコードはこのコマンドが実行されるまで待機してから実行する必要があります。 import コマンドは非同期ロードです。より正確には、ES6 モジュールには独立した静的解析フェーズがあり、その段階で依存関係の解析が完了し、最下位レベルのモジュールが最初に実行されます。

2. Node.jsとの違い

Node.js では、ES6 モジュールで .mjs サフィックス ファイル名を使用する必要があります。つまり、スクリプト ファイルでインポート コマンドまたはエクスポート コマンドが使用される限り、.mjs サフィックスを使用する必要があります。 Node.js は .mjs ファイルを検出すると、それを ES6 モジュールと見なし、デフォルトで厳密モードを有効にします。各モジュール ファイルの先頭で "use strict" を指定する必要はありません。

サフィックスを .mjs に変更したくない場合は、プロジェクトの package.json ファイルで type フィールドを module として指定できます。

{
   「タイプ」:「モジュール」
}

設定すると、このディレクトリ内の JS スクリプトは ES6 モジュールとして解釈されます。

# ES6モジュールとして解釈する

$ ノード my-app.js

現時点でも CommonJS モジュールを使用したい場合は、CommonJS スクリプトのサフィックスを .cjs に変更する必要があります。 type フィールドがない場合、または type フィールドが commonjs の場合、.js スクリプトは CommonJS モジュールとして解釈されます。

一言でまとめると、.mjs ファイルは常に ES6 モジュールとして読み込まれ、.cjs ファイルは常に CommonJS モジュールとして読み込まれ、.js ファイルの読み込みは package.json の type フィールドの設定によって決まります。

ES6 モジュールと CommonJS モジュールを混在させないでください。 require コマンドは .mjs ファイルを読み込むことができないため、エラーが報告されます。import コマンドのみが .mjs ファイルを読み込むことができます。逆に、.mjs ファイルでは require コマンドは使用できず、import を使用する必要があります。

3. CommonJSモジュールの読み込みES6モジュール

CommonJS の require() コマンドは ES6 モジュールをロードできず、エラーを報告します。ロードするには import() メソッドのみを使用できます。

(非同期() => {
  './my-app.mjs' をインポートするのを待ちます。
})();

上記のコードは CommonJS モジュールで実行できます。

require() が ES6 モジュールをサポートしない理由の 1 つは、同期的にロードされ、最上位レベルの await コマンドが ES6 モジュール内で使用できるため、同期的にロードできないことです。

4. ES6モジュールはCommonJSモジュールをロードする

ES6 モジュールの import コマンドは CommonJS モジュールを読み込むことができますが、単一の出力項目ではなく、モジュール全体を読み込むことができます。

// 正しい import packageMain from 'commonjs-package';

// エラー import { method } from 'commonjs-package';

これは、ES6 モジュールは静的コード解析をサポートする必要があり、CommonJS モジュールの出力インターフェースは module.exports であり、これはオブジェクトであり静的に解析できないため、全体としてしかロードできないためです。

単一の出力項目をロードする場合は、次のように記述できます。

'commonjs-package' から packageMain をインポートします。
const { メソッド } = packageMain;

5. 両方の形式をサポートするモジュール

モジュールに対して CommonJS と ES6 の両方の形式をサポートすることも簡単です。

元のモジュールが ES6 形式の場合、CommonJS が import() を使用してロードできるように、export default obj などの全体的な出力インターフェースを指定する必要があります。

元のモジュールが CommonJS 形式の場合は、ラッパー レイヤーを追加できます。

'../index.js' から cjsModule をインポートします。
エクスポート const foo = cjsModule.foo;

上記のコードは、まず CommonJS モジュール全体をインポートし、次に必要に応じて名前付きインターフェースを出力します。

ファイル拡張子を .mjs に変更するか、サブディレクトリに配置して、そのサブディレクトリに { type: "module" } を指定して別の package.json ファイルを配置することができます。

もう 1 つの方法は、package.json ファイルの exports フィールドに 2 つの形式のモジュールの読み込みエントリ ポイントを指定することです。

「エクスポート」: { 
    "require": "./index.js",
    「インポート」: 「./esm/wrapper.js」 
}

上記のコードでは require() と import を指定しており、モジュールをロードすると自動的に別のエントリ ファイルに切り替わります。

上記は、Node.js が ES6 モジュールを処理する方法についての詳細な説明です。Node.js が ES6 モジュールを処理する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript ES6 分割演算子の理解と応用
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)
  • シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JS における ES6 継承と ES5 継承の違い
  • JS ES6コーディング標準の詳細な説明
  • JSでES6クラスの使い方をすぐにマスター
  • JS ES6 変数分割代入の詳細な説明
  • JS ES6 スプレッド演算子の魔法のような使い方
  • フロントエンドJavaScript ES6の詳細について

<<:  Nginx http ヘルスチェック構成プロセス分析

>>:  MySQL 5.7 でブロックポジショニング DDL の問題を解決する

推薦する

CSSの優先度を理解する2つの方法

方法1: 値を追加する公式の説明を見るには MDN にアクセスしてください。優先度はどのように計算さ...

Dockerfileの指示と基本構造の説明

Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

nginx+php-fpm サービスの HTTP ステータス コード 502 の詳細な分析

弊社の Web プロジェクトの 1 つでは、新しい都市の増加によりトラフィックと DB 負荷が増加し...

発生したブラウザの互換性の問題と解決策(推奨)について

序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...

Windows で mysql-8.0.18-winx64 をインストールするチュートリアル (画像とテキスト付き)

1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

vue3+vite プロジェクトで svg を使用する方法の詳細なグラフィック説明

今日、vue3+viteプロジェクトの実践で、svgを使用する場合、以前の記述方法が使用できないこと...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

HTML チュートリアル、optgroup 要素の理解

カテゴリ選択を選択します。テストの結果、IE と FF はこの要素を適切にサポートできることがわかり...

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...

Docker Toolboxを完全にアンインストールする方法

Docker Toolbox は、Windows 10 Professional より前のバージョン...

MySQL 面接の質問: ハッシュ インデックスの設定方法

B-Tree インデックスに加えて、MySQL は次のインデックスも提供します。ハッシュインデックス...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

露滴アニメーション効果を実装するための Three.js サンプル コード

序文みなさんこんにちは。CSS ウィザードの alphardex です。この記事では、three.j...