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/*" ] }
- 追加したコミット https://github.com/jiska/yarn-workspace-example/commit/b029be86d8714adb7640c02245d51fdc0ecdad63
パスにはワイルドカード指定ができるのでこの場合は 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
- package-oneを追加 https://github.com/jiska/yarn-workspace-example/commit/90d371411cdef50bcb76970c3ebb739b7b7c9930
- package-twoを追加 https://github.com/jiska/yarn-workspace-example/commit/c1035abf7e6cc6897a23a92f91ba2cd8505f0a18
yarn workspace <workspace_name>
各パッケージのディレクトリにcdせずにプロジェクトrootから各パッケージに向けて yarn run
や yarn add
を行うことができます。
詳細は https://yarnpkg.com/en/docs/cli/workspace をご確認ください。
yarn workspace package-one dev
と yarn workspace package-two serve
している様子をAsciinemaにアップロードしています。
git pre-commit hookを調整する
pre-commit hookの調整に Husky と lint-staged と ESLint を追加します。
これらはプロジェクト全体で利用したいのでプロジェクトrootのpackage.jsonに追加します。
追加するためには -W
オプションを付与する必要があります。
yarn add --dev -W husky lint-staged eslint
- 追加したコミット https://github.com/jiska/yarn-workspace-example/commit/fe80208fb6efd8c55082927ab2ed9a74b0698f5e
pre-commit hookが動作している様子をAsciinemaにアップロードしています。
今回は新規パッケージを作成するため0からレポジトリを構築しましたが、既存のレポジトリを追加したり npm publish
の手順については触れませんでした。
それらのニーズを叶えるには Lerna を使うとよさそうです。LernaとYarn workspaceは共存可能なので今回の記事の内容と合わせて試してみてください。
最後に
株式会社ROXXでは一緒に SARDINE と back check を作っていくメンバーを随時募集しています。 この記事を読んでROXXに興味を持ってくれた方はぜひご応募ください。 www.wantedly.com