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 の問題を解決する

推薦する

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

Alibaba Cloud Server の詳細な展開 (グラフィック チュートリアル)

最近、Web 開発のフロントエンドとバックエンドの技術を学んだので、その後の管理を容易にするためにプ...

DeepinでPyenvをインストールする手順

序文これまでは、/bin/ ディレクトリのソフトリンクを変更して Python のバージョンを切り替...

MySQL データ分析ストレージエンジンの例の説明

目次1. 事例紹介2. システムのデフォルトのストレージエンジンとデフォルトの文字セットを表示する3...

Windows 10 でカスタムドメイン名をバインドするように Hexo と GitHub を構成する方法

Hexo は Windows 10 でカスタムドメイン名を GitHub にバインドしますまずドメイ...

Docker Consul コンテナ サービスの更新と見つかった問題の概要

目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...

Dockerはブリッジを追加し、IPアドレスの範囲を設定します

バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

HTMLでのフォーム送信の実装

フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル (Windows の場合)

この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...