庭に花壇を作ったところ変に日焼けをしてしまい、半袖で外に出るのが恥ずかしいです。最近、Misocaのフロントエンド周りのビルドをWebpackerを利用したものに置き換えました。様々な知見が得られたので書いてみたいと思います。Webpacker?フロントエンド用のビルドツールであるwebpackをRailsから簡単に使えるようにするためのRubyGemsです。際に同時にwebpack用の設定ファイルを生成することもできます。流行りのフロントエンド環境を構築しようとする際、最近ではwebpackを利用するケースが多いですが、実際にはES6やReactなどが混ざることも多く、慣れていないと設定するだけでもなかなか敷居が高いです。Railsと組み合わせる場合には、アセットパイプラインとの兼ね合いをどうするか?などといった課題も登場するため、考えるだけで鼻血が出そうになります。Webpackerを利用することで、その辺りをいい感じに解消してくれるというわけです。利用していましたが、ビルド時間がMisoca内で問題になっていました。キャッシュによる高速化が効いてはいるものの、何かの拍子にフルビルドが走ると数分待たされることも。CIでも上記の影響を受けるため、開発効率にあまりよろしくない影響を与えていました。(開発効率が落ちた図)なんとかしたい最初はbrowserify-rails自体のチューニングを検討しましたが、webpackでのビルドを一度試してみたところ、そもそもフルビルドでも20秒くらいで終わることがわかりました。MisocaではRails5.1を導入済みだったのもあり、Webpackerを使って本格的に導入を試みることに。大きく分けると以下の3つかと思います。rakeタスクの提供ボイラープレートの生成viewヘルパーの提供rakeタスクの提供Webpackerを追加すると、いくつかのrakeタスクが利用可能となります。特徴的なものを簡単にご紹介します。webpacker:installボイラープレートを生成する。このタスクで、システムに必要なバージョンのNode.js/Yarnがインストールされているか検証できます。実行し、Webpackerによるビルドが可能な状態かを検証できます。」は、このタスク成功時の出力結果です。呼び出し、webpackビルドを実行します。RAILS_ENVの値を参照し、各環境に応じたビルドを実行してくれます。よるチェックが行われます。enhanceで事前タスクとして登録されています。実行していれば、そこでwebpackビルドが自動的に実行されます。付与されないので、意図しないバージョンによるビルドが行われてしまう可能性がある点に注意が必要です。付与されるように一手間加えています。実行すると、webpackに必要な各種ファイルが自動的に生成されます。相当するファイル群ES6ビルド用のbabelrcパス設定などを集約したYAMLファイル(webpacker.yml)などなどまた、Misocaでは利用していませんが、一部ライブラリに特化した形でのインストールも可能です。webpacker:install:reactwebpacker:install:vueetc..これにより、ES6+Reactなどを利用したフロントエンド開発を行うための環境を手早く構築することができ、ダイジェスト付きのjs生成なども簡単に行うことができるようになります。提供され、Webpackerによってビルドされたファイルを利用する場合はこちらを利用する必要があります。方針設定がむしゃらに始めると迷宮に入っていくかもしれません。今回は「Webpackerの導入」にフォーカスしたいため、以下のような方針にしました。配下へ移動する必要がありますが、Webpacker導入作業中もプロダクト開発は行われているため、頻繁にコンフリクトが発生することが予想されました。加えることで、導入完了後にあらためて移動だけを行うことにしました。以下のようなコードを加えて、entryにObject.assignでマージすることで対応します。modules)に書き換えSprocketsで依存解決をしている場合、jsまたはcoffee内に以下のような記述が存在する可能性があります。使った形に書き換える必要があります。追加する必要があります。ロードされていたライブラリを、npmモジュールを利用するように変更しました。gemが提供しているjsファイルをrequireしていることもあります。した手順を踏んでいきました。単体で提供されています。値がグローバル定義されているのを前提としているコードがある場合、グローバルに値を明示的に定義しないとアクセス不可となることがあります。あるケースだと思います。)今回はグッとこらえてグローバル依存自体は残しました。意見のある方はこちらからどうぞ!共通でロードするjsファイルがあれば、その先頭に以下のようなコードを足すだけで参照可能となります。require('jquery');なおMisocaで導入した際には、さらに以下のような対応も行っています。jsファイルに抽出した別ファイルとした。利用した、ライブラリから別ライブラリの参照。場合は複数スクリプトを単一タグでロードできるのに対し、javascript_pack_tagの場合はエラーとなるため、そこだけは分割する必要があります。serverとwebpackで二つのプロセスの起動が必要です。foremanを利用した方法が記載されています。こちらも併せて導入しておきました。(基本的な導入手順はREADMEの記述のままなのでここでは割愛します。)インクリメンタルビルドについてwebpackを利用したインクリメンタルビルドには2つの方法があります。好みや環境によってどちらを利用するか選択すれば良いと思います。デフォルトとし、foremanで利用するProcfileに記載しています。webpack用の設定ファイル内でいい感じに吸収してくれるので、特に意識しなくても大丈夫です。導入にあたりコアとなった作業は以上です。地味な作業も多かったですが、コツコツがんばりました。最終的なdiffはこんな感じです。成果としては、開発時の待ち時間も軽減され、なかなか良かったのではないかと思います。Webpacker自体に関してですが、実際にはWebpackerが生成するボイラープレートに賛否両論あったりもするようです。Wayとして示されたこと自体が一つのメリットだと考えています。カスタマイズしようと思った場合には、最終的にはある程度フロントエンド側の知識も必要となりますが、うまく使えれば様々な恩恵を受けられるかもしれません。11:00関連記事2019-02-22Webpackerを導入してから外すまでをふりかえるこんにちは、@mugi_unoです。