1. suin

    Posted

    suin
Changes in title
+yarn workspaceでtsconfig.jsonを共通化したモノレポを作りたい
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,201 @@
+本稿では、tsconfig.jsonの設定を各パッケージで共有したモノレポをyarn workspaceで実現するまでの手順をステップバイで説明する。
+
+
+### モノレポの初期化
+
+
+```
+mkdir my-monorepo
+cd my-monorepo
+```
+
+yarn initでpackage.jsonを生成する。
+
+```bash
+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`という名前のディレクトリを作る。
+
+```bash
+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`ディレクトリにパッケージを作る。
+
+```bash
+mkdir packages/{foo,bar}
+```
+
+現状のディレクトリ構成は次のようになっている。
+
+```tree
+モノレポルート
+├── package.json
+└── packages
+ ├── bar
+ └── foo
+```
+
+各パッケージにてpackage.jsonを作成する。
+
+```bash
+cd packages/bar
+yarn init --yes
+cd ../foo
+yarn init --yes
+```
+
+package.json作成後のディレクトリ構成:
+
+```tree
+モノレポルート
+├── 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`モジュールをインストールする。
+
+```bash
+cd ${モノレポルートのディレクトリ}
+yarn workspace foo add --dev typescript
+yarn workspace bar add --dev typescript
+```
+
+ちなみに、`tsc`がインストールされたかは次のように確認できる。
+
+```
+yarn workspace foo tsc --version
+```
+
+ディレクトリ構成はだいたい次のようになる(関係のあるファイルだけ記載)。
+
+
+```tree
+モノレポルート
+├── 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を作る。
+
+```bash
+tsc --init
+```
+
+このファイルが共通設定を書く場所になる。
+
+つづいて、各パッケージにもtsconfig.jsonを作る。
+
+
+```bash
+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ファイルを追加し、コンパイルしてみる。
+
+```bash
+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の共通化は完了。