こんにちはSCOUTERでエンジニアをしているhirokinishizawaです。
弊社ではVue製のUIコンポーネント集をはじめいくつか外部パッケージ化をしています。以前まで外部パッケージの開発を行う際に変更したら外部パッケージを毎回ビルドし直して、その外部パッケージを使用しているアプリケーションに反映をさせていました。少しの変更でも再ビルドを行い反映をするという作業が入るため、外部パッケージの大きめなアップデートをするときにはとてもじゃないですが面倒臭すぎてやってられませんでした。なので今回差分ビルドを行い確認するまでのコストを削減するようにしたのでその話をしていこうかと思います。
どのような問題があったのか
冒頭でも説明したのですが、外部パッケージを修正したあとローカル環境で確認コストが高いというのが開発メンバー内で挙げられた課題でした。実際パッケージを修正してからアプリケーションに反映をするまでに下記を実行していました。
外部パッケージを修正
↓
外部パッケージを再ビルド(yarn dist{webpack --progress --config build/webpack.base.conf.js})
↓
アプリケーションに修正を反映させるためにビルドしたファイルをrsyncでコピーする
↓
アプリケーションで反映完了を待つ
これを少しでも修正する度に行っていました。
外部パッケージの再ビルドに時間がかかるためコストが高いというのもあるのですが、弊社で開発をしているSARDINEというサービスではadminを含め3つのステークホルダーが存在しているため、それぞれに反映させるのがとても面倒臭いというのが今回差分ビルドやyarn linkを出来るようにする起因となりました。
なぜ外部パッケージを作成したのか
上記でも同じことを言いましたが弊社で開発をしているSARDINEというサービスには3つのステークホルダーが存在します。
それぞれユーザーの種類は違いますがいくつか共通な画面があります。なので共通部分のコンポーネントをパッケージ化することによってコードを1箇所にまとめることができるため、修正を加えるレポジトリが1つで済むようになり、同じドメイン領域に関するコードがまとまっているためどのような処理が行われているのかを見通しやすくなるため作成しました。
yarn link + 差分ビルドするための方法
変更自体はほとんどありません。 外部パッケージで差分ビルドできるようにするために外部パッケージのpackage.jsonにscriptsを追加。
"watch": "webpack --progress --config build/webpack.base.conf.js --watch"
これでyarn watchでパッケージの差分ビルドを行えるようになります。
次にwebpackの設定を変更しないと外部パッケージでyarn link で貼ったシンボリックリンクの解決に失敗しアプリケーション側で参照できないため、resolve.symlinks を false に変更します。
以上で準備完了です。各リポジトリ1,2行ぐらいですねｗ
最後にターミナルでの実行方法を書いて終わりにしたいと思います。
外部パッケージでyarn link ↓ 外部パッケージでyarn watch ↓ アプリケーションでyarn link <package-name> ↓ アプリケーションをビルド
実行したあとは外部パッケージを修正しターミナルでパッケージのyarn watchとアプリケーション側のビルドが動いているのを確認できれば完了です。
余計なコストを減らして爆速で開発をしていきましょう！
最後に
SCOUTER社では一緒に働く仲間を募集しています！ 興味のある方は下記からご応募いただくか、弊社CTOまでご連絡ください！
