webpacker,webpack,Sprocketsを整理する
整理した表
| webpacker | webpack | Sprockets | |
|---|---|---|---|
| これ何？ | webpackをRails用にwrapしたGem | 静的アセット（特にjs）を最適化して配信するためのnode.jsのパッケージ。 | 静的アセット（特にcss,image）を最適化して配信するためのGem。 |
| Good | 少ない記述でwebpackを導入できていた。 | – 最新のjavascriptツールを利用できる（babelとか） – jsのトランスパイルができる – js以外もcss,imageも処理できる。 – nodeパッケージなのでRails以外でも使える。 | – Rails標準のGemなので記述が短かったり相性が良い。 – 初期設定がほぼ不要でそのまま使える。 |
| Bad | 開発終了 Retireしました。 | imageをrailsで使用するには、出力先の変更など手間がかかる。 | – jsのトランスパイル機能はない – Rails以外では使えない汎用性の低さ。 |
| 設定ファイル | config/webpacker.yml | app/assets/config/manifest.js | |
| エントリポイント | app/javascript/packs/application.js | app/assets/config/manifest.js | |
| デフォルトの input元 | app/assets/config/manifest.jsに記述されたもの。 | ||
| デフォルトの output先 | app/ |
個人的最適解
今の所のRailsアセットパイプラインの最適解は、Sprocketsだけで良いかななんて思ってます。
最大の理由は、工数が他のものに比べて少なくて済むから。
理想を言えば、Webpackだけで賄える方が、Rails以外でも使えるので技術的にも推奨したい。
フロントをRails依存から開放してあげると、マイクロサービス化する際も楽ですよね。
webpackは今の所汎用性の高いフロントの技術です。
しかし、Railsでwebpackを使うとなると、webpack自体の知識が必要です。
特に、画像をwebpackでコンパイルした後にassets/imageにおいてあげたり、自動コンパイルの設定だったり、css,jsはassets以下の任意のディレクトリに置いたりと、sprocketsと組み合わせて使う必要が出てきます。