# アーキテクチャ構成図

## システム全体構成図

```mermaid
graph TB
    subgraph "User Interface Layer"
        CLI["@babel/cli<br/>Command Line Interface"]
        API["@babel/core API<br/>transform / parse"]
        Register["@babel/register<br/>require hook"]
        Standalone["@babel/standalone<br/>Browser Bundle"]
    end

    subgraph "Configuration Layer"
        Config["Configuration System"]
        ConfigFiles["babel.config.js<br/>.babelrc<br/>package.json"]
        PluginLoader["Plugin/Preset Loader"]
    end

    subgraph "Transformation Pipeline"
        Parser["@babel/parser<br/>Parser"]
        Traverse["@babel/traverse<br/>AST Traversal"]
        Generator["@babel/generator<br/>Code Generator"]
    end

    subgraph "Plugin Ecosystem"
        Presets["Presets"]
        TransformPlugins["Transform Plugins"]
        SyntaxPlugins["Syntax Plugins"]
        ProposalPlugins["Proposal Plugins"]
    end

    subgraph "Support Libraries"
        Types["@babel/types<br/>AST Types"]
        Template["@babel/template<br/>Code Templates"]
        Helpers["@babel/helpers<br/>Runtime Helpers"]
        Runtime["@babel/runtime<br/>Runtime Library"]
    end

    CLI --> API
    Register --> API
    Standalone --> API

    API --> Config
    Config --> ConfigFiles
    Config --> PluginLoader

    PluginLoader --> Presets
    PluginLoader --> TransformPlugins
    PluginLoader --> SyntaxPlugins
    PluginLoader --> ProposalPlugins

    API --> Parser
    Parser --> Traverse
    Traverse --> Generator

    Traverse --> TransformPlugins
    Traverse --> Types

    Generator --> Types

    TransformPlugins --> Types
    TransformPlugins --> Template
    TransformPlugins --> Helpers

    Runtime --> Helpers
```

## コンパイラパイプライン詳細

```mermaid
flowchart LR
    subgraph Input
        SourceCode["Source Code<br/>(ES2015+, JSX, TS, Flow)"]
    end

    subgraph "Parse Phase"
        Tokenizer["Tokenizer"]
        ParserCore["Parser"]
        AST1["AST"]
    end

    subgraph "Transform Phase"
        PluginChain["Plugin Chain"]
        Visitor["Visitor Pattern"]
        AST2["Transformed AST"]
    end

    subgraph "Generate Phase"
        Printer["Printer"]
        SourceMap["Source Map Generator"]
    end

    subgraph Output
        OutputCode["Output Code<br/>(ES5, CommonJS, etc.)"]
        Map["Source Map"]
    end

    SourceCode --> Tokenizer
    Tokenizer --> ParserCore
    ParserCore --> AST1

    AST1 --> PluginChain
    PluginChain --> Visitor
    Visitor --> AST2

    AST2 --> Printer
    Printer --> OutputCode
    AST2 --> SourceMap
    SourceMap --> Map
```

## パッケージ依存関係図

```mermaid
graph TD
    subgraph "Core Packages"
        core["@babel/core"]
        parser["@babel/parser"]
        traverse["@babel/traverse"]
        generator["@babel/generator"]
        types["@babel/types"]
        template["@babel/template"]
        helpers["@babel/helpers"]
    end

    subgraph "CLI & Tools"
        cli["@babel/cli"]
        node["@babel/node"]
        register["@babel/register"]
    end

    subgraph "Presets"
        presetEnv["@babel/preset-env"]
        presetReact["@babel/preset-react"]
        presetTS["@babel/preset-typescript"]
        presetFlow["@babel/preset-flow"]
    end

    subgraph "Helpers"
        helperTargets["@babel/helper-compilation-targets"]
        helperPluginUtils["@babel/helper-plugin-utils"]
        helperModuleImports["@babel/helper-module-imports"]
        compatData["@babel/compat-data"]
    end

    cli --> core
    node --> core
    register --> core

    core --> parser
    core --> traverse
    core --> generator
    core --> template
    core --> types

    traverse --> types
    generator --> types
    template --> parser
    template --> types
    helpers --> template

    presetEnv --> core
    presetEnv --> helperTargets
    presetEnv --> compatData
    presetReact --> core
    presetTS --> core
    presetFlow --> core

    helperTargets --> compatData
```

## 設定解決フロー

```mermaid
flowchart TB
    subgraph "Configuration Discovery"
        Start["transform() called"]
        LoadOptions["Load Options"]
        FindConfig["Find Config Files"]
        BabelConfig["babel.config.js"]
        Babelrc[".babelrc"]
        PackageJson["package.json babel field"]
    end

    subgraph "Configuration Merge"
        MergeConfigs["Merge Configurations"]
        ResolvePresets["Resolve Presets"]
        ResolvePlugins["Resolve Plugins"]
        FlattenPresets["Flatten Preset Chains"]
    end

    subgraph "Plugin Resolution"
        OrderPlugins["Order Plugins<br/>(pre -> normal -> post)"]
        LoadPlugins["Load Plugin Modules"]
        ValidatePlugins["Validate Plugins"]
    end

    subgraph "Final Configuration"
        FinalConfig["Resolved Configuration"]
    end

    Start --> LoadOptions
    LoadOptions --> FindConfig
    FindConfig --> BabelConfig
    FindConfig --> Babelrc
    FindConfig --> PackageJson

    BabelConfig --> MergeConfigs
    Babelrc --> MergeConfigs
    PackageJson --> MergeConfigs

    MergeConfigs --> ResolvePresets
    ResolvePresets --> FlattenPresets
    FlattenPresets --> ResolvePlugins
    ResolvePlugins --> OrderPlugins
    OrderPlugins --> LoadPlugins
    LoadPlugins --> ValidatePlugins
    ValidatePlugins --> FinalConfig
```

## AST変換処理フロー

```mermaid
sequenceDiagram
    participant User as User Code
    participant Core as @babel/core
    participant Config as Config System
    participant Parser as @babel/parser
    participant Traverse as @babel/traverse
    participant Plugin as Transform Plugin
    participant Types as @babel/types
    participant Generator as @babel/generator

    User->>Core: transform(code, options)
    Core->>Config: loadConfig(options)
    Config-->>Core: resolvedConfig

    Core->>Parser: parse(code, parserOptions)
    Parser-->>Core: AST

    Core->>Traverse: traverse(AST, visitor)

    loop For each plugin
        Traverse->>Plugin: enter(path)
        Plugin->>Types: buildNode()
        Types-->>Plugin: newNode
        Plugin->>Traverse: path.replaceWith(newNode)
    end

    Traverse-->>Core: transformedAST

    Core->>Generator: generate(AST, options)
    Generator-->>Core: { code, map }

    Core-->>User: { code, map, ast }
```

## Visitor パターン詳細

```mermaid
graph TB
    subgraph "AST Structure"
        File["File"]
        Program["Program"]
        Function["FunctionDeclaration"]
        Arrow["ArrowFunctionExpression"]
        Block["BlockStatement"]
        Return["ReturnStatement"]
        Expr["Expression"]
    end

    subgraph "Visitor Flow"
        Visit["traverse(ast, visitor)"]
        Enter["enter(path)"]
        Exit["exit(path)"]
        Skip["path.skip()"]
        Stop["path.stop()"]
        Replace["path.replaceWith()"]
        Remove["path.remove()"]
    end

    File --> Program
    Program --> Function
    Program --> Arrow
    Function --> Block
    Arrow --> Expr
    Block --> Return
    Return --> Expr

    Visit --> Enter
    Enter --> |"process node"| Exit
    Enter --> |"skip children"| Skip
    Enter --> |"stop traversal"| Stop
    Enter --> |"modify AST"| Replace
    Enter --> |"remove node"| Remove
```

## プリセット展開フロー

```mermaid
flowchart TB
    subgraph "@babel/preset-env"
        PresetEnv["preset-env"]
        Targets["Target Browsers"]
        CompatData["Compatibility Data"]
        FilterPlugins["Filter Required Plugins"]
    end

    subgraph "Generated Plugin List"
        TransformArrow["transform-arrow-functions"]
        TransformClasses["transform-classes"]
        TransformSpread["transform-spread"]
        TransformParams["transform-parameters"]
        More["...more plugins"]
    end

    subgraph "Optional Features"
        Bugfixes["bugfixes"]
        CoreJS["corejs polyfills"]
        Modules["modules (commonjs/esm)"]
    end

    PresetEnv --> Targets
    Targets --> CompatData
    CompatData --> FilterPlugins

    FilterPlugins --> TransformArrow
    FilterPlugins --> TransformClasses
    FilterPlugins --> TransformSpread
    FilterPlugins --> TransformParams
    FilterPlugins --> More

    PresetEnv --> Bugfixes
    PresetEnv --> CoreJS
    PresetEnv --> Modules
```

## モノレポパッケージ構成

```mermaid
graph LR
    subgraph "Repository Root"
        Root["babel/"]
    end

    subgraph "packages/"
        CorePkgs["Core<br/>babel-core<br/>babel-parser<br/>babel-traverse<br/>babel-generator<br/>babel-types"]
        ToolPkgs["Tools<br/>babel-cli<br/>babel-node<br/>babel-register<br/>babel-standalone"]
        PresetPkgs["Presets<br/>babel-preset-env<br/>babel-preset-react<br/>babel-preset-typescript<br/>babel-preset-flow"]
        PluginPkgs["Plugins<br/>babel-plugin-transform-*<br/>babel-plugin-proposal-*<br/>babel-plugin-syntax-*"]
        HelperPkgs["Helpers<br/>babel-helper-*<br/>babel-template<br/>babel-helpers<br/>babel-runtime"]
    end

    subgraph "eslint/"
        ESLintPkgs["ESLint<br/>babel-eslint-parser<br/>babel-eslint-plugin"]
    end

    subgraph "codemods/"
        CodemodPkgs["Codemods<br/>codemod-*"]
    end

    subgraph "Other"
        Scripts["scripts/"]
        Test["test/"]
        Benchmark["benchmark/"]
    end

    Root --> CorePkgs
    Root --> ToolPkgs
    Root --> PresetPkgs
    Root --> PluginPkgs
    Root --> HelperPkgs
    Root --> ESLintPkgs
    Root --> CodemodPkgs
    Root --> Scripts
    Root --> Test
    Root --> Benchmark
```

## ビルドシステム構成

```mermaid
flowchart TB
    subgraph "Source"
        TS["TypeScript Source<br/>(packages/*/src/)"]
    end

    subgraph "Build Tools"
        Gulp["Gulp"]
        Rollup["Rollup"]
        Babel["Babel<br/>(self-hosted)"]
        TSC["TypeScript Compiler"]
    end

    subgraph "Build Output"
        ESM["ESM Output<br/>(lib/)"]
        CJS["CommonJS Output<br/>(for older Node)"]
        DTS["Type Definitions<br/>(*.d.ts)"]
        Bundle["Standalone Bundle<br/>(babel-standalone)"]
    end

    subgraph "Quality Tools"
        ESLint["ESLint"]
        Prettier["Prettier"]
        Jest["Jest Tests"]
        TypeCheck["Type Check"]
    end

    TS --> Gulp
    Gulp --> Babel
    Gulp --> Rollup
    Gulp --> TSC

    Babel --> ESM
    Rollup --> CJS
    Rollup --> Bundle
    TSC --> DTS

    TS --> ESLint
    TS --> Prettier
    TS --> Jest
    TS --> TypeCheck
```
