diff --git "a/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" "b/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" index e42dba8..ed677bc 100644 --- "a/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" +++ "b/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" @@ -92,7 +92,7 @@ ・main: "./dist/index.js", types: "./dist/index.d.ts" を指定する. ・scripts: "build": "tsup src/index.ts --format cjs,esm --dts" を追加する. - 3. エントリーポイントの作成 (追加手順) + 3. エントリーポイントの作成 tsupがビルド対象とするファイルを作成する. $ mkdir src @@ -101,6 +101,30 @@ ※ 現時点では空ファイルでよいが,将来的に constants.ts 等を export する記述を行う. (例: export * from './constants';) + 4. TypeScript設定ファイルの作成 (tsconfig.json) + ビルドと型定義生成のための設定ファイルを作成する. + ・ファイル: packages/shared/tsconfig.json + ・内容: + { + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "outDir": "./dist", + "rootDir": "./src", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] + } + 3-2. フロントエンド (apps/client) Vite プロジェクトとして初期化を行う. @@ -144,6 +168,30 @@ "scripts": { "dev": "tsx watch src/index.ts" } + + 5. TypeScript設定ファイルの作成 (tsconfig.json) + 開発時の実行環境とパス解決のための設定ファイルを作成する. + ・ファイル: apps/server/tsconfig.json + ・内容: + { + "compilerOptions": { + "target": "ES2022", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "lib": ["ES2022"], + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "paths": { + "@repo/shared": ["../../packages/shared/src/index.ts"] + } + }, + "include": ["src/**/*"], + "exclude": ["node_modules"] + } 4. 開発ツール設定 (Dev Tools Setup) @@ -172,10 +220,63 @@ ・VS Code 右下のアイコンからログイン状態を確認する. -5. 動作確認 (Verification) +5. 構成確認 (Configuration Check) ------------------------------------------------------------------------ -5-1. ビルド確認 +5-1. 最終ディレクトリ構成 + 構築完了時点で,以下のディレクトリおよびファイルが存在することを確認する. + + SkillSemiWebGame/ + ├── package.json + ├── pnpm-workspace.yaml + ├── .npmrc + ├── apps/ + │ ├── client/ + │ │ ├── src/ + │ │ ├── index.html + │ │ ├── package.json + │ │ ├── tsconfig.json + │ │ └── vite.config.ts + │ │ + │ └── server/ + │ ├── src/ + │ │ └── index.ts + │ ├── package.json + │ └── tsconfig.json + │ + └── packages/ + └── shared/ + ├── src/ + │ └── index.ts + ├── package.json + └── tsconfig.json + +5-2. 重要ファイル設定確認 + 各パッケージの連携設定が正しいか確認する. + + ■ root/pnpm-workspace.yaml + packages: + - 'apps/*' + - 'packages/*' + + ■ packages/shared/package.json + ・name: "@repo/shared" + ・main: "./dist/index.js" + ・types: "./dist/index.d.ts" + + ■ apps/client/package.json + ・dependencies: + "@repo/shared": "workspace:*" + + ■ apps/server/package.json + ・dependencies: + "@repo/shared": "workspace:*" + + +6. 動作確認 (Verification) +------------------------------------------------------------------------ + +6-1. ビルド確認 ルートディレクトリから全体の依存関係をインストールし,ビルドを試行する. $ cd ../../ @@ -184,7 +285,7 @@ ※ shared のビルドが成功することを確認する. -5-2. 開発サーバー起動 +6-2. 開発サーバー起動 モノレポ構成のため,個別のディレクトリに移動せず,プロジェクトルートから --filter オプションを使用して各アプリを起動する. ※ ターミナルを2つ開き,両方を同時に起動した状態で開発を進めることを推奨.