JS / TSプロジェクトのモジュールとは何ですか？

この記事は、HUAWEICLOUDコミュニティの「JS/ TSプロジェクトのモジュールとは何ですか？」から共有されています。フォームはいくつありますか？ローダーとバンドラーの違いは何ですか？、gentle_zhouによる。

JS / TSプロジェクトを日常的に開発する場合require、依存関係に遭遇しmodule.exportsて関数を定義することがよくあります。さらに、コードを毎日確認すると、tsconfig.jsonファイル"compilerOptions"にモジュールの導入に関するものがあることがわかりました。そのため、コードが何を表し、何をするの"commonjs"か興味があります。Modules

この記事は、紹介のために次の部分に分かれています。モジュールとは何ですか。;なぜモジュールが必要なのですか？;モジュールのいくつかの一般的な形式;モジュールローダーとモジュールバンドラーの違い;リファレンスリンク。

モジュールとは何ですか？

モジュールは、その名前が示すように、内部コード実装の詳細をカプセル化して公開する再利用可能なコード（通常は機能または機能のコレクション。ファイルまたは複数のファイル/フォルダーのコレクションの場合もあります）です。他のコードが簡単にロードして使用できるパブリックAPI。

なぜモジュールが必要なのですか？

実際、技術的に言えば、JS / TSプロジェクトを完了するためにモジュールは必要ありません。また、コードを直接記述することもできます。ただし、JAVAやPythonソフトウェアプロジェクトの場合と同様に、依存関係を導入しないと、プログラマーは同じコードを繰り返し作成することになります。

Moduleの導入は、JS/TSプロジェクトのますます大きく複雑になるコードに対処することです。JS / TSプロジェクトのビジネスロジックを管理するには、ソフトウェアエンジニアリング手法を使用する必要があります。

JS / TSプロジェクトでは、モジュールによって次の実装が可能になります。

抽象コード：機能を特殊なライブラリに委任して、それらが実際に内部でどのように実装されているかを理解する必要がないようにします（どんなに複雑であっても）
カプセル化されたコード：コードを変更したくない場合は、モジュール内のコードを非表示にすることができます
コードを再利用する：同じコードを何度も書くことは避けてください
依存関係の管理：コードを書き直すことなく、依存関係を簡単に変更できます

いくつかの一般的なモジュールフォーム

ES6モジュールが登場する前、ES5期間中、JSはモジュールを定義するための公式ルールを提供していませんでした。したがって、JavaScriptコミュニティの才能あるプログラマーは、「既存のランタイム環境で」達成するためにさまざまな形式でモジュールを定義しようとしました。モジュール効果」。

モジュールのいくつかの非常によく知られている形式：

CommonJS CommonJSフォームはNode.js環境で使用されます。
記事の冒頭で述べたrequire合計module.exportsは、CommonJSの依存関係とモジュールを定義するために使用されます。
```
  var dep1 = require('./dep1');  
  module.exports = function(){  // ...}
```
非同期モジュール定義（AMD）
AMD（公式githubリンク）はブラウザーで使用されます。名前が示すように、この形式は非同期であり、モジュールdefine函数を定義するために使用されます。
```
  // 一个依赖数组&一个工厂函数以参数的形式调用define函数
  define(['dep1', 'dep2'], function (dep1, dep2) {
  //通过返回一个值来定义模块值
  return function () {};
  });
```

ユニバーサルモジュール定義（UMD）
UMDは、ブラウザーとNode.jsで使用でき、ユニバーサルです。

  (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
      // AMD. 以同步模块的方式注册.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
      // Node节点. 不能和严格意义上的CommonJS一起使用，但是类似CommonJS的环境里是支持使用module.expoerts的，就像node.
      module.exports = factory(require('b'));
    } else {
      // 浏览器 globals (根节点是window)
      root.returnExports = factory(root.b);
    }
  }(this, function (b) {  
    // 返回一个值来定义module export；这里返回的是一个对象，但是模块其实可以返回一个函数作为exported value.
    return {};
  }));

そして今、公式のES6モジュール形式、モジュールのネイティブ形式。エクスポートを使用して、モジュールのパブリックAPIをエクスポートします。

// 输出函数
export function sayHello(){  
  console.log('Hello');
}

importとasを使用して、コードの一部をモジュールにインポートできます。

import { sayHello as say } from './lib';

say(); // 输出Hello

または、最初にモジュール全体を直接インポートします。

import * as lib from './lib';

lib.sayHello();  // 输出 Hello

モジュールローダーとモジュールバンドラーの違い

どちらも、モジュラーJS/TSアプリケーションの作成をより簡単かつ迅速に行えるように設計されています。

モジュールローダー

モジュールローダーは、特定のモジュール形式（通常は一部のライブラリ）で記述されたモジュールを解析およびロードするために使用されます。AMDやCommonJSなどの特定のモジュール形式/構文を使用して定義されたJavaScriptモジュールをロード、解釈、および実行できます。

モジュラーJS/TSアプリケーションを作成する場合、モジュールごとに1つのファイルを使用するのが一般的です。したがって、数百のモジュールで構成されるアプリケーションを作成する場合、すべてのファイルが正しい順序で含まれていることを確認するのは非常に難しい場合があります。したがって、依存関係の管理を処理するローダーがあれば、アプリケーションの実行時にすべてのモジュールがロードされていることを確認する方がはるかに簡単です。

モジュールローダーは実行時に実行されます。

ブラウザにモジュールローダーをロードします
ロードするメインアプリケーションファイルをモジュールローダーに指示します
モジュールローダーは、メインアプリケーションファイルをダウンロードして解析します
モジュールローダーは必要に応じてファイルをダウンロードします

ブラウザの開発者コンソールで[ネットワーク]タブを開こうとすると、モジュールローダーによってオンデマンドで多くのファイルが読み込まれることがわかります。

一般的なモジュールローダーの例を次に示します。

RequireJS：AMDフォーマットモジュールローダー
SystemJS：AMD、CommonJS、UMD、またはSystem.register形式のモジュールローダー

モジュールバンドラー

モジュールバインダーは、モジュールローダーの代替品と同等です。基本的に、同じことを行います（相互に依存するモジュールの管理とロード）。

ただし、モジュールバインダーとローダーの違いは、実行時に実行されるのではなく、アプリケーションビルドの一部として（ビルド時に実行される）実行され、ブラウザーにロードされることです。したがって、バインダーは、コードの実行時に表示される依存関係をロードするのではなく、コードを実行する前にすべてのモジュールを単一のファイル/バンドル（例：bundle.js）にマージします。たとえば、Webpack（AMD、CommonJS、es6モジュールバンドラー）とBrowserify（CommonJSモジュールバンドラー）の2つの人気のあるバンドラーがあります。

いつどちらを使うのが良いですか？

この質問に対する答えは、JS/TSアプリケーションの構造とサイズによって異なります。

バンドラーを使用する主な利点は、ブラウザーがダウンロードするファイルが大幅に少なくなることです。これにより、アプリケーションのパフォーマンスが向上します（ロードにかかる時間が短縮されるため）。ただし、アプリケーションのモジュール数によって異なります。バンドラーを使用することが必ずしも最良であるという意味ではありません。この種の大規模なアプリケーション（多数のモジュールを含む）の場合、最初に巨大な単一ファイルをロードするバンドラーがアプリケーションの起動を妨げるため、モジュールローダーはパフォーマンスを向上させることができます。

選択方法は、実際、テストして比較するだけです〜

参照リンク

https://v8.dev/features/modules
https://www.geeksforgeeks.org/node-js-modules/
https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/
https://stackoverflow.com/questions/38864933/what-is-difference-between-module-loader-and-module-bundler-in-javascript

初めてHUAWEICLOUDの新技術について学ぶには、[フォロー]をクリックしてください〜