yarn workspace で複数パッケージを同一レポジトリで管理する

SARDINEエンジニアの @jiskanulo です。jiskaと書いて「ゆうすけ」と読んで欲しい中二病を20年近く患ってるんですが誰にも伝わらないのが最近の悩みです。

SARDINEでは、たとえばお客さまが見る画面やROXX社内の人間が操作する管理画面、それらで共通で参照するパッケージ、API通信をやりとりするサーバー...などなど様々な用途のレポジトリが存在していますが、現在それら複数パッケージを同一レポジトリで管理する Monorepo 化を進めています。

MonoRepo化を進めているかの詳細はCTO @kotamats が登壇しました Monolith→MultiRepo→MonoRepoにいく上でのリポジトリ戦略 もご覧いただけますと幸いです。

この記事では yarn workspace を用いてMonorepoを新規構築するための手順をまとめます。

また、今回の記事を通して作成したレポジトリは https://github.com/jiska/yarn-workspace-example にpushしています。

yarn workspace

yarn workspace は複数パッケージを一つのレポジトリで管理するための機能です。 それぞれのパッケージでpackage.jsonを保持しつつ、yarn.lockはプロジェクトのrootに1つだけ作られるようになります。

workspaceを有効にするためにpackage.json"private": true, "workspaces": ["packageのパス"] の記述を追加します。

{
  "name": "yarn-workspace-example",
  "version": "1.0.0",
  "main": "index.js",
  "author": "yusuke mori <210861+jiska@users.noreply.github.com>",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

パスにはワイルドカード指定ができるのでこの場合は packages ディレクトリ以下すべてのディレクトリがworkspace管理の対象に含まれます。

パッケージを追加する

package-one , package-two とパッケージを追加してみます。package-oneはNuxtをただ追加しただけの素ページ、package-twoは vue create で作成したページです。

package.json, yarn.lockは以下のように配置されます。

.
├── package.json
├── packages
│   ├── package-one
│   │   └── package.json
│   └── package-two
│       └── package.json
└── yarn.lock

yarn workspace <workspace_name>

各パッケージのディレクトリにcdせずにプロジェクトrootから各パッケージに向けて yarn runyarn add を行うことができます。

詳細は https://yarnpkg.com/en/docs/cli/workspace をご確認ください。

yarn workspace package-one devyarn workspace package-two serve している様子をAsciinemaにアップロードしています。

asciicast

git pre-commit hookを調整する

pre-commit hookの調整に Huskylint-stagedESLint を追加します。

これらはプロジェクト全体で利用したいのでプロジェクトrootのpackage.jsonに追加します。 追加するためには -W オプションを付与する必要があります。

yarn add --dev -W husky lint-staged eslint

pre-commit hookが動作している様子をAsciinemaにアップロードしています。

asciicast

今回は新規パッケージを作成するため0からレポジトリを構築しましたが、既存のレポジトリを追加したり npm publish の手順については触れませんでした。

それらのニーズを叶えるには Lerna を使うとよさそうです。LernaとYarn workspaceは共存可能なので今回の記事の内容と合わせて試してみてください。

最後に

株式会社ROXXでは一緒に SARDINEback check を作っていくメンバーを随時募集しています。 この記事を読んでROXXに興味を持ってくれた方はぜひご応募ください。   www.wantedly.com