Blockchain Strategy Centerの中村です。
今回はrenopackerという社内Railsフロントエンドboilerplateの紹介をさせて頂きます。
GitHub - ga-tech/renopacker: Frontend boilerplate of Rails x webpack (default TypeScript & React)
丁度年始頃にMedPeer社さんが
medpackerを公開されておりましたが、
弊社も社内で同じ様なアセットを自社で開発していたため、あやかって renopacker と名付けて公開させて頂きました。
（公開をご快諾頂いたMedPeerの村上さん (@pipopotamasu3)、ありがとうございました！）
コンセプト
renopackerも同様に
- webpackerを外して素のwebpackを利用
することを至上命題としております。 （何故webpackerを剥がしたのか？については色々な方が書かれておりますのでここでは省きます）
renopackerでは脱webpackerに加えて
- コンテナベース(ローカル開発・デプロイ)
- TypeScriptに最適化されたwebpackの設定
を特徴としています。
コンテナベース
前提としてstatic assetsはprecompileされるため、リモートの環境においてはwebpackの実行環境(Node.js)が不要です。
そのため、 webpack-dev-server と rails のdockerfileを分けています。
railsのview templateとのintegration
こちらはpixivさんの今日から簡単！Webpacker 完全脱出ガイドを参考にさせて頂きました。
具体的には webpackの webpack-manifest-plugin でmanifest.jsonを生成し、
bundle.js の様な論理名から bundle-xxx.js などビルドごとに一意になるdigest付の実体ファイル名に解決します。
HTTP Requestベースでシーケンスを整理すると下記の様になります。
TypeScript
webpackについては webpack/ ディレクトリ以下に用意がありますが、
common.config.js:development.config.js: ローカル含む開発環境用の設定production.config.js: staging/production用の設定
とファイルが分かれています。
その中でも品質やドキュメントの豊富さを考慮し
- webpack communityのサポートがあるloader/plugin
- webpack officalで推奨される設定
をベースにconfigurationを行いました。 具体的な工夫として以下を行なっています。
TypeScriptのビルド高速化
開発環境において、TypeScriptを書きながらのトライ&エラーを高速化するため、
webpack-dev-server に加えて、
cache-loader / thread-loaderを利用して複数のentrypointを並列でtranspileしています。
また, fork-ts-checker-webpack-plugin を導入し、型チェックとTranspileを別スレッドで実行しています。
本番環境用のminify
optimize-css-assets-webpack-plugin と terser-webpack-pluginを導入し、
本番環境向けのjs/cssのminifyを行なっています。
おわりに
GA technologiesなのに何故renopacker?と思われた方もいらっしゃると思いますが、
弊社は RENOSY という中古不動産流通プラットフォームを運営しており、そちらから冠しています。
(とは言ったもののrenopackerはRENOSYではなく別の新規プロダクトで使われております)
まだまだ改善点はありますので、今後プロダクト開発の中で培った知見を、 renopackerの方にもフィードバックしていく予定です。
また、renopackerにcontributeして頂いたエンジニアチームの田渕さん/白井さんにもこの場を借りて深く感謝です！
GA technologiesは、RENOSYで掲げられている通り「不動産をオープンに、わかりやすく」するサービスを、鋭意開発していきますので、引き続きよろしくお願いいたします。
