Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

モノレポの初期化

mkdir my-monorepo
cd my-monorepo

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

yarn init --yes --private

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

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

suin
Qiita 4位/TypeScript入門書執筆中/TypeScripterのための座談会「YYTypeScript」主催/『実践ドメイン駆動設計』書籍邦訳レビュア/分報Slack考案/YYPHP主催/CodeIQマガジン執筆/株式会社クラフトマンソフトウェア創設/Web自動テスト「ShouldBee」の開発/TypeScript/DDD/OOP
https://yyts.connpass.com/
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away