JavaScriptモジュール

• 現在、すべての JS を 1 つのファイルに記述してクライアントに送信することはありません。
• 現在、私たちはモジュール間でデータを共有し、より保守しやすいコードをモジュールに記述します。
• モジュールにはキャメルケース名を使用するのが慣例です。
• jquery、react、webpack、babel などの npm リポジトリを介して、サードパーティのモジュールを独自のコードに組み込むこともできます。
• 最終的なバンドルは小さなモジュール ファイルから構築され、本番サーバーにデプロイされ、最終的にクライアントに送信されます。
• モジュールは古いブラウザではサポートされていません
• パフォーマンス上の理由から、小さな js ファイルをブラウザに送信することをお勧めします。
• モジュールは JS の非常に重要な部分であり、開発者によってすでに数十年にわたって他の言語で使用されています。
• モジュール: プロジェクトの特定部分の実装の詳細をカプセル化する再利用可能なコード部分。
• これはスタンドアロン ファイルですが、必ずしもそうである必要はありません。
• モジュールにはインポートとエクスポートも可能 ネイティブ ES6 モジュール: ES6 より前にはモジュールはありませんでした。自分自身で実装するか、外部ライブラリを使用する必要がありました。モジュールはファイルに保存され、ファイルごとに 1 つのモジュールが正確に保存されます。
• モジュールから値や関数などをエクスポートできます。エクスポートするものはすべてパブリック API と呼ばれ、他のコードが利用できるように公開されます。
• このパブリック API は、パブリック コードをモジュールにインポートすることによって使用され、依存関係と呼ばれます。
• 単純なアプリケーションはモジュールなしで作成することもできますが、エンタープライズ規模のプロジェクトの場合はモジュールが必要です。

• アドバンス:
  ->モジュールは複雑なアプリケーションを構築するために組み立てられる小さな構成要素であるため、ソフトウェアの作成が非常に簡単になります。
  ->コンポーネントの分離: 各機能は、他の開発者の作業やシステム全体の動作を気にすることなく、完全に分離して開発できます。
  ->コードの抽象化: 低レベルのコードをモジュールに実装し、これらの抽象化を他のモジュールにインポートすると、自然に、より組織化されたコードベースが得られます。
  ->コードの再利用性: 複数のプロジェクト間でもコードを再利用できます。

• 最新の JS はバンドルとトランスパイルを使用します。
  

## Bundling = is a complex process which involves:
a. Eliminate unused Code
b. Combine all modules into single file.
c. Compress the code.
Ex. webpack build tool - requires manual config, hence complex.
Ex. parcel - zero build tool as we don't need to write any setup code.

## Transpiling/Polyfiling:
Convert modern JS to ES5 or older syntax such that older browser supports the application. 
Ex. done using tool called Babel

Entire process results in the final bundle file for production ready to be deployed on server. 

### Scripts are also files but they are different from ES6 modules in the following ways:
Script[used earlier]:
- All top level variables are always global. This leads to global namespace pollution and name-coliision.
- Default mode: Sloppy mode
- Top level 'this' points to window object.
- Import/Export of values is not allowed.
- Linked to html using plain script tag.
- Downloaded by default in sync way, unless async or defer attribute is used.

### ES6 Modules:
- All top-level variables are scoped to module i.e they are private by default. Such a value can be access by outside varible only when its exported by the module else it will be inaccessible for outside world.
- Default mode: Strict mode. Hence with modules no more need to declare strict mode.
- Top level 'this' is 'undefined'
- Allows import/export of values using ES6 syntax of import/export.
- Link to html file using <script type="module"> tag.
- File download always happens in an async way, i.e for module loaded from html or an import one module to another.

## Understanding module import process:
Parsing -> [Asyn module download, Linking import-export, Execute individual module itself] -> Execution overall index.js
- import/export only need to happen at the top level of if-block or any function. Imports are hoisted. Importing values is always the first thing which happens in a module.
- Top-level static imports make imports known before execution. 
- Modules are loaded in async way from the server, importing happens in sync manner. 
- Parsing refers to reading the code without executing it in which imports are hoisted. Modules are imported even before execution. Hence, it enables bundling & code elimation even before fn exection. [V Impt as large projects have 100s of modules, and 3rd party modules also from which we want the small piece and not the entire module]
- Bundlers can then join multiple modules, and then eliminate code. hence, we can easily import/export from code.
- After a module arrives, its parsed and then the module exports are linked to imports in index.js i.e live connection is established between import inside index.js and export statement of the module file. They are not copied. Import is just a reference to the exported value. Hence, when the value changes in the exporting module, it also changes in the importing module too. This concept is unique to ES6 modules, other module system don't work like this.
- Code in the imported modules is executed.

以上がJavaScriptモジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。