0Pricing
TypeScript Academy · レッスン

MonorepoとProject References

ワークスペース型のmonorepoを作成し、TypeScriptのProject Referencesを接続して、高速な増分ビルドと整理されたパッケージ間の型を実現します

「MonorepoとProject References」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全1レッスンが含まれています。

はじめに

目標：規模を拡大できるモノレポを構成します。ワークスペースを宣言し、Project References を追加して、tsc -b で増分出力をビルドします。

  • pnpm/yarn ワークスペース
  • コンポジットプロジェクト
  • 共有型

ワークスペースの構成

シンプルな2パッケージ構成です。shared（ライブラリ）とapp（sharedに依存）で構成されます。ワークスペースによってローカルパッケージがリンクされます。

# folder structure (for reference)
			/monorepo
			package.json
			tsconfig.base.json
			packages/
			shared/
			src/index.ts
			package.json
			tsconfig.json
			app/
			src/index.ts
			package.json
			tsconfig.json

ルートのワークスペース

ワークスペースを宣言すると、パッケージマネージャーによってローカル依存関係がリンクされます。TSのビルドモードを使用するbuild／cleanスクリプトを追加します。

// package.json (root)
			{
			"name": "monorepo",
			"private": true,
			"workspaces": ["packages/*"],
			"scripts": {
			"build": "tsc -b packages/*",
			"clean": "tsc -b packages/* --clean"
			}
			}

shared パッケージ

ライブラリをcompositeプロジェクトとして設定します。依存側がすばやく型チェックできるように、宣言ファイルを生成します。

// packages/shared/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true,
    "composite": true
  },
  "include": ["src"]
}

// packages/shared/src/index.ts
export interface User { id: string; name: string }
export const hello = (u: User) => `Hello, ${u.name}`

app パッケージ + refs

sharedに依存するためのreferencesエントリを追加します。ビルダーは最初にsharedをコンパイルし、その後にappをコンパイルします。

// packages/app/tsconfig.json
			{
			"extends": "../../tsconfig.base.json",
			"compilerOptions": {
			"outDir": "dist",
			"rootDir": "src",
			"composite": true
			},
			"references": [
			{ "path": "../shared" }
			],
			"include": ["src"]
			}

			// packages/app/src/index.ts
		import { hello } from "shared"
console.log(hello({ id: "u1", name: "Ada" }))

基本設定とヒント

ヒント：

  • 共通のコンパイラーオプション用にtsconfig.base.jsonを作成します。
  • パッケージ名に対応するpathsマッピングを使用します。
  • ローカル開発をインクリメンタルに行うには、tsc -b --watchを実行します。

References の要件チェック

クイックチェック：参照される各パッケージには何を含める必要がありますか？

まとめ

まとめ：ワークスペースによってローカルパッケージがリンクされます。Project References（composite + references）によって、高速でインクリメンタルなtsc -bビルドと、パッケージ間で信頼できる型チェックが可能になります。

よくある質問

「MonorepoとProject References」レッスンは無料ですか？

はい。「MonorepoとProject References」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全1レッスンが含まれています。

「MonorepoとProject References」で何を学びますか？

ワークスペース型のmonorepoを作成し、TypeScriptのProject Referencesを接続して、高速な増分ビルドと整理されたパッケージ間の型を実現します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。

「MonorepoとProject References」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← TypeScript Academyに戻る