JA Deployment Build Process - hiraishikentaro/rails-factorybot-jump GitHub Wiki

デプロイ: ビルドプロセス

ビルドプロセス概要

Rails FactoryBot Jump は、VSCode 拡張配布用にソースコードを JavaScript にコンパイルする TypeScript ベースのビルドシステムを使用します。ビルドプロセスには、コンパイル、リンティング、テスト、パッケージングが含まれます。

ビルドシステムアーキテクチャ

1. TypeScript コンパイル

コンパイル設定 (tsconfig.json):

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2020",
    "outDir": "out",
    "lib": ["ES2020"],
    "sourceMap": true,
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules", ".vscode-test"]
}

主要コンパイル設定:

ターゲット: 最新の JavaScript 機能のための ES2020
モジュールシステム: CommonJS（VSCode 拡張機能で必須）
出力ディレクトリ: コンパイル済み JavaScript 用の out/
ソースマップ: デバッグサポートのため有効
ストリクトモード: 型安全性のため有効

ソース: tsconfig.json

2. ビルドスクリプト

Package.json ビルドスクリプト:

{
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  }
}

スクリプトの目的:

vscode:prepublish: VSCode マーケットプレイス用のプリ公開フック
compile: 一回限りの TypeScript コンパイル
watch: ファイル監視付きの開発モード
pretest: プリテスト準備（compile + lint）
lint: コード品質チェック
test: テスト実行

ソース: package.json#L68-L76

ビルドワークフロー

1. 開発ビルド

標準開発ワークフロー:

# 依存関係をインストール
npm install

# TypeScript を JavaScript にコンパイル
npm run compile

# ビルド出力を確認
ls out/
# 期待: extension.js, providers/, test/

開発用ウォッチモード:

# 自動再コンパイル用のウォッチモードを開始
npm run watch

# これにより:
# - TypeScript ファイルの変更を監視
# - ファイル保存時に自動再コンパイル
# - デバッグ用のソースマップを保持
# - 停止するまで継続実行

2. プロダクションビルド

プリ公開ビルド:

# 完全なプロダクションビルドプロセス
npm run vscode:prepublish

# これは以下を実行:
# 1. TypeScript コンパイル
# 2. ソースマップ生成
# 3. 出力最適化

ビルド確認:

# コンパイル済み出力を確認
node out/extension.js  # エラーになるべきではない

# ファイル構造をチェック
find out/ -name "*.js" -type f
# 期待されるファイル:
# out/extension.js
# out/providers/factoryLinkProvider.js
# out/test/runTest.js
# out/test/suite/extension.test.js
# out/test/suite/index.js

3. 品質保証ビルド

プリテストビルドプロセス:

# 完全な QA ビルドを実行
npm run pretest

# これは順次実行:
# 1. npm run compile  - TypeScript をコンパイル
# 2. npm run lint     - コード品質をチェック
# いずれかのステップが失敗すると、プロセスが停止

リンティングプロセス:

# スタンドアロンリンティング
npm run lint

# クリーンなコードの期待出力:
# ✓ ESLint エラーまたは警告なし

# 自動修正可能な問題を修正
npx eslint src --ext ts --fix

ソース: package.json#L72-L73

ビルド出力構造

1. コンパイル済み JavaScript 構造

out/
├── extension.js              # メイン拡張機能エントリーポイント
├── extension.js.map          # デバッグ用ソースマップ
├── providers/
│   ├── factoryLinkProvider.js    # コアプロバイダー実装
│   └── factoryLinkProvider.js.map
└── test/
    ├── runTest.js           # テストランナー
    ├── runTest.js.map
    └── suite/
        ├── extension.test.js     # テストケース
        ├── extension.test.js.map
        └── index.js         # テストスイート設定
        └── index.js.map

2. ソースマップサポート

ソースマップの利点:

VSCode Extension Development Host で TypeScript ソースをデバッグ
TypeScript 行を指す正確なエラースタックトレース
元の TypeScript ファイルでのブレークポイントサポート

ソースマップ確認:

# ソースマップ生成をチェック
ls out/*.map out/**/*.map

# ソースマップ内容を確認
cat out/extension.js.map | jq '.sources'
# 元の TypeScript ファイルパスを表示すべき

拡張機能パッケージング

1. VSIX パッケージ生成

手動パッケージング（開発用）:

# vsce（VSCode Extension CLI）をインストール
npm install -g vsce

# VSIX パッケージを作成
vsce package

# これは以下を生成:
# rails-factorybot-jump-{version}.vsix

パッケージ内容確認:

# VSIX 内容を抽出して検査
unzip -l rails-factorybot-jump-*.vsix

# 含まれるべき主要ファイル:
# - package.json（拡張機能マニフェスト）
# - out/ ディレクトリ（コンパイル済み JavaScript）
# - README.md
# - LICENSE
# - images/icon.png

2. パッケージ最適化

ファイル除外 (.vscodeignore):

.vscode/**
.vscode-test/**
out/test/**
src/**
.gitignore
.yarnrc
vsc-extension-quickstart.md
**/tsconfig.json
**/.eslintrc.json
**/*.map
.nyc_output
coverage
**/.github
node_modules
*.vsix

サイズ最適化:

# パッケージサイズをチェック
ls -lh *.vsix

# 最適サイズ: この拡張機能では < 1MB
# より大きい場合、.vscodeignore の除外を確認

継続的インテグレーションビルド

1. GitHub Actions ビルドマトリックス

CI ビルド設定 (.github/workflows/ci.yml):

name: CI

on: [push, pull_request]

jobs:
  test:
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node-version: [18.x]
    
    runs-on: ${{ matrix.os }}
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Compile TypeScript
      run: npm run compile
    
    - name: Run linting
      run: npm run lint
    
    - name: Run tests
      run: npm test
      if: runner.os == 'Linux'
      env:
        DISPLAY: ':99'
    
    - name: Run tests (non-Linux)
      run: npm test
      if: runner.os != 'Linux'

2. ビルドアーティファクト

CI ビルド出力:

out/ ディレクトリのコンパイル済み JavaScript
テスト結果とカバレッジレポート
リンティング結果
クロスプラットフォーム互換性確認

ビルドステータス確認:

# プッシュ前にローカルでビルドステータスをチェック
npm run pretest && npm test

# クロスプラットフォーム互換性を確認
# 可能であれば Windows、macOS、Linux でテスト

リリースビルドプロセス

1. バージョン管理

バージョン更新プロセス:

# package.json でバージョンを更新
npm version patch  # または minor/major

# これは自動的に:
# - package.json バージョンを更新
# - git タグを作成
# - バージョン変更をコミット

2. 公開ビルド

マーケットプレイス公開:

# 完全な公開プロセス
npm run vscode:prepublish
vsce package
vsce publish

# またはローカルパッケージなしで直接公開
vsce publish

公開前チェックリスト:

すべてのテストが通過
リンティングがクリーン
バージョンが更新済み
CHANGELOG が更新済み
README が最新
クロスプラットフォームテストが完了

この包括的なビルドプロセスは、開発効率とコード品質基準を維持しながら、信頼性の高い高品質な拡張機能配布を保証します。