# 機能設計書 25-ESモジュールライブラリ出力

## 概要

本ドキュメントは、webpackのModuleLibraryPluginによるES Module形式（`import`/`export`）でのライブラリ出力機能について記述する。

### 本機能の処理概要

ModuleLibraryPluginは、webpackでバンドルされたライブラリをES Module形式で出力する機能を提供する。`export { ... }` 構文を用いてモジュールのエクスポートを公開し、ネイティブESModuleとして利用可能なバンドルを生成する。

**業務上の目的・背景**：モダンなJavaScript開発ではES Module形式が標準となっている。Tree Shakingの恩恵を最大限に受けるためにも、ライブラリをESModule形式で出力する需要が高い。特にnpmパッケージの`module`フィールドやbrowserフィールドで参照されるESMバンドルの生成に利用される。

**機能の利用シーン**：ESModule対応のライブラリ構築時に、`output.library.type: 'module'` または `'modern-module'` を指定して利用する。`experiments.outputModule: true` の有効化が必要。

**主要な処理内容**：
1. エントリモジュールのエクスポート情報を収集し、使用状態を設定する
2. ConcatenatedModuleのonDemandExportsGenerationフックで実行時エクスポートソースを管理する
3. renderStartupメソッドでESM `export` 文を生成する
4. 動的再エクスポート（`export * from`）の解析と出力を行う

**関連システム・外部連携**：ConcatenatedModule（Scope Hoisting）と密接に連携し、インライン化されたモジュールのエクスポート最終名を管理する。ExportsInfo/UsageStateと連携してエクスポートの使用・マングリング状態を制御する。

**権限による制御**：本機能に権限による制御はない。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当する画面なし |

## 機能種別

コード生成処理（ESModule形式エクスポート文の生成）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| library.name | - | No | 未設定必須 | 設定されている場合エラー |
| library.export | string \| string[] | No | エクスポートするプロパティ名 | - |
| options.type | 'module' \| 'modern-module' | Yes | ESModule出力タイプ | - |

### 入力データソース

webpack設定の `output.library` オプション。

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| source | ConcatSource | export文付きバンドルソース |

### 出力先

JavascriptModulesPluginのrenderStartupフックを通じて、ESModuleバンドルファイルとして出力される。

## 処理フロー

### 処理シーケンス

```
1. オプションパース（parseOptions）
   └─ nameが設定されていればエラー
2. エントリモジュール完了処理（finishEntryModule）
   ├─ export指定ありの場合、指定エクスポートの使用状態をUsed/canMangleUse=falseに設定
   ├─ CommonJSモジュールの場合、setUsedInUnknownWayで使用状態を設定
   └─ それ以外の場合、全既知エクスポートをUsedに設定
3. onDemandExportsGenerationフック処理
   └─ ConcatenatedModuleの実行時エクスポートソースと最終名をランタイムキー別に管理
4. renderStartup
   ├─ 非同期モジュールの場合、awaitでエクスポートを解決
   ├─ 各エクスポート情報をイテレート
   │   ├─ provided=falseのエクスポートはスキップ
   │   ├─ CommonJSモジュールのdefaultエクスポートはスキップ
   │   └─ 再エクスポートのprovided=false検出でスキップ
   ├─ インライン定義がある場合はそのまま使用、なければ変数宣言を追加
   ├─ shortHandedExports（`export { a as b }`形式）を収集
   ├─ 複雑な名前のexportsは`export const x = expr`形式で出力
   ├─ _analyzeUnknownProvidedExportsで動的再エクスポートを解析
   │   ├─ 外部モジュールからの`export *`を `export * from "..."` として出力
   │   └─ 内部モジュールの未知エクスポートを収集
   └─ CommonJSモジュールの場合、`__webpack_exports__ as default`を追加
```

### フローチャート

```mermaid
flowchart TD
    A[renderStartup呼び出し] --> B{非同期モジュール?}
    B -->|Yes| C[awaitでエクスポート解決]
    B -->|No| D[エクスポート情報イテレート]
    C --> D
    D --> E{provided?}
    E -->|No| D
    E -->|Yes| F[usedNameの解決]
    F --> G{インライン定義あり?}
    G -->|Yes| H[定義をそのまま使用]
    G -->|No| I[変数宣言を追加]
    H --> J[export文形式の決定]
    I --> J
    J --> K[動的再エクスポート解析]
    K --> L[export文の出力]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | ライブラリ名禁止 | ESModule出力ではライブラリ名は設定不可 | 常時 |
| BR-02 | CommonJSデフォルト | CommonJSモジュールはdefaultエクスポートとして`__webpack_exports__`を公開 | treatAsCommonJs=true |
| BR-03 | 非同期await | 非同期モジュールはawaitでエクスポートを解決 | moduleGraph.isAsync(module)=true |
| BR-04 | 動的再エクスポート | `export * from 'external'` パターンの解析と出力 | HarmonyExportImportedSpecifierDependencyのdynamic-reexport |

### 計算ロジック

エクスポート文の形式決定：
- 短縮形式: `export { finalName as originalName }` - 単純な識別子の場合
- 長形式: `export const originalName = expression` - 複雑な式の場合

## データベース操作仕様

### 操作別データベース影響一覧

本機能にデータベース操作はない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Error | nameが設定されている場合 | "Library name must be unset" |

### リトライ仕様

リトライ処理はない。

## トランザクション仕様

トランザクション管理はない。

## パフォーマンス要件

ESMエクスポート生成はコンパイル時処理であり、パフォーマンスへの影響は軽微。ただし、_analyzeUnknownProvidedExportsはモジュールグラフの走査を行うため、大規模プロジェクトでは考慮が必要。

## セキュリティ考慮事項

本機能にセキュリティ上の特別な考慮事項はない。

## 備考

- `module` タイプと `modern-module` タイプは同じModuleLibraryPluginで処理される
- ConcatenatedModule（Scope Hoisting）との連携により、インライン化されたモジュールのエクスポート最終名を直接参照できる
- `renderModuleContent` メソッドで、ファクトリやIIFEインライン時にエクスポートソースを再追加する処理がある

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | ModuleLibraryPluginParsed型（45-48行目）- name, export |
| 1-2 | ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | buildMeta.exportsSourceByRuntime / exportsFinalNameByRuntime の構造 |

**読解のコツ**: このプラグインは他のライブラリプラグインと異なり、`render`ではなく`renderStartup`をオーバーライドする。ESM形式では全体をラップするのではなく、末尾にexport文を追加するためである。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EnableLibraryPlugin.js | `lib/library/EnableLibraryPlugin.js` | 286-293行目: 'module'/'modern-module'での初期化 |

#### Step 3: ConcatenatedModuleとの連携を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | 72-103行目: applyメソッド（onDemandExportsGenerationフック） |

**主要処理フロー**:
- **76-77行目**: ConcatenatedModuleのonDemandExportsGenerationフックを取得
- **80行目**: module, runtimes, source, finalNameを受け取る
- **86-97行目**: ランタイムキーごとにエクスポートソースと最終名をbuildMetaに保存

#### Step 4: エクスポート生成処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | 255-409行目: renderStartupメソッド |
| 4-2 | ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | 169-246行目: _analyzeUnknownProvidedExports |

### プログラム呼び出し階層図

```
EnableLibraryPlugin.apply()
    │
    └─ ModuleLibraryPlugin.apply()
           │
           ├─ AbstractLibraryPlugin.apply()
           │      ├─ hooks.finishModules.tap() ──▶ finishEntryModule()
           │      └─ hooks.renderStartup.tap() ──▶ renderStartup()
           │
           ├─ ConcatenatedModule.onDemandExportsGeneration.tap()
           │      └─ buildMeta に exportsSourceByRuntime/exportsFinalNameByRuntime 保存
           │
           └─ renderStartup()
                  ├─ エクスポート情報イテレート
                  ├─ shortHandedExports / exports 収集
                  ├─ _analyzeUnknownProvidedExports()
                  │      ├─ HarmonyExportImportedSpecifierDependency 走査
                  │      └─ ExternalModule の export * from 出力
                  └─ export { ... } / export const ... 文生成
```

### データフロー図

```
[入力]                            [処理]                          [出力]

moduleGraph.exportsInfo ──────▶ finishEntryModule() ──▶ 使用状態設定
                                   (UsageState.Used)

ConcatenatedModule ───────────▶ onDemandExportsGeneration ──▶ buildMeta保存
  (source, finalName)

エントリモジュール ──────────▶ renderStartup() ──────────▶ export { a, b as c };
  (exportsInfo)                  (export文生成)            export const d = expr;
                                                           export * from "external";
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ModuleLibraryPlugin.js | `lib/library/ModuleLibraryPlugin.js` | ソース | ESModule形式エクスポートの生成 |
| AbstractLibraryPlugin.js | `lib/library/AbstractLibraryPlugin.js` | ソース | ライブラリプラグインの基底クラス |
| EnableLibraryPlugin.js | `lib/library/EnableLibraryPlugin.js` | ソース | ライブラリタイプの有効化 |
| ConcatenatedModule.js | `lib/optimize/ConcatenatedModule.js` | ソース | Scope Hoisting連携（onDemandExportsGeneration） |
| HarmonyExportImportedSpecifierDependency.js | `lib/dependencies/HarmonyExportImportedSpecifierDependency.js` | ソース | 動的再エクスポート（export *）の依存表現 |
| ExternalModule.js | `lib/ExternalModule.js` | ソース | 外部モジュールの表現 |
