yarn workspaceでtsconfig.jsonを共通化したモノレポを作りたい #TypeScript

本稿では、tsconfig.jsonの設定を各パッケージで共有したモノレポをyarn workspaceで実現するまでの手順をステップバイで説明する。

モノレポの初期化

mkdir my-monorepo
cd my-monorepo

yarn initでpackage.jsonを生成する。

yarn init --yes --private

生成された内容は次のようになる。モノレポルートのpackageはprivateがtrueになっている必要がある。

package.json

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true ←ここがtrueになっているのが大事
}

パッケージを置き場を作る。名前は自由だが慣例にならい、ここではpackagesという名前のディレクトリを作る。

mkdir packages

yarnにパッケージ置き場を認識してもらうために、package.jsonにworkspacesを追記する。

package.json

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": ["packages/*"] ←　これを加える
}

各パッケージの初期化

./packagesディレクトリにパッケージを作る。

mkdir packages/{foo,bar}

現状のディレクトリ構成は次のようになっている。

モノレポルート
├── package.json
└── packages
    ├── bar
    └── foo

各パッケージにてpackage.jsonを作成する。

cd packages/bar
yarn init --yes
cd ../foo
yarn init --yes

package.json作成後のディレクトリ構成:

モノレポルート
├── package.json
└── packages
    ├── bar
    │   └── package.json
    └── foo
        └── package.json

作成されたpackage.jsonの中身

packages/foo/package.json

{
  "name": "bar",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

各パッケージにtypescriptモジュールをインストールする。

cd ${モノレポルートのディレクトリ}
yarn workspace foo add --dev typescript
yarn workspace bar add --dev typescript

ちなみに、tscがインストールされたかは次のように確認できる。

yarn workspace foo tsc --version

ディレクトリ構成はだいたい次のようになる(関係のあるファイルだけ記載)。

モノレポルート
├── node_modules
│  ├── .bin/tsc ※1へのシンボリックリンク
│  └── typescript/bin/tsc ※1
├── package.json
├── packages
│  ├── bar
│  │  ├── node_modules/.bin/tsc ※1へのシンボリックリンク
│  │  └── package.json
│  └── foo
│     ├── node_modules/.bin/tsc ※1へのシンボリックリンク
│     └── package.json
└── yarn.lock

tsconfig.jsonの共通化

モノレポルートにtsconfig.jsonを作る。

tsc --init

このファイルが共通設定を書く場所になる。

つづいて、各パッケージにもtsconfig.jsonを作る。

yarn workspace foo tsc --init
yarn workspace bar tsc --init

これまでの手順で3つのtsconfig.jsonが作成される。

モノレポルート
├── packages
│   ├── bar
│   │   └── tsconfig.json
│   └── foo
│       └── tsconfig.json
├── tsconfig.json

foo/tsconfig.jsonからモノレポルートのtsconfig.jsonを参照するようにする。

packages/foo/tsconfig.json

{
  "extends": "../../tsconfig.json"
}

bar/tsconfig.jsonも同様に。

packages/bar/tsconfig.json

{
  "extends": "../../tsconfig.json"
}

各パッケージにTypeScriptファイルを追加し、コンパイルしてみる。

echo 'export const foo = (x: any) => x' > packages/foo/index.ts
echo 'export const bar = (x: any) => x' > packages/bar/index.ts

yarn workspace foo tsc
yarn workspace bar tsc

コンパイルされ、JavaScriptファイルができる。

packages/foo/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = function (x) { return x; };

以上で、tsconfig.jsonの共通化は完了。

この手順で出来上がった成果物はGitHubにて公開している: https://github.com/suin/typescript-playground/tree/share-tsconfig-between-packages