まとめ
- Rails 4.2 で既存の AssetPipeline にまったく手を加えずに Webpacker を導入しました
- Webpacker は導入から deploy まで簡単でよい
- Webpacker のサイトの情報だけでなく、Webpack も Yarn も（そこそこ）追っておこう
- さすがに Node.js と npm もさすがにね
前提知識
- Webpacker は AssetPipeline とは独立した RailsEngine であり、共存できる
- Webpacker は Yarn で Webpack を入れるのでそれぞれについてある程度知っている必要あり
- （使うだけならインストール方法と簡単な使い方の手引きがあればよい）
決めなきゃいけないこと
- Webpacker で AseetPipeline を置き換えてしまうか否か
決めたこと
- AssetPipeline は AssetPipeline でそのままにする
- /app/javascript/ はさすがに狂ってる気がするので /app/webpacker/ に置くことにした
webpack 管理が webpacker 管理の他に生まれるということは基本的に考えていない。
根拠
- まだ Webpack やモダンJS、モダンCSS に習熟したエンジニアがプロジェクトの中心にいない
- 既存のコードについて は 熟練工がすぐに必要な状況ではない
- ただし、新規では Vue.js を使ったアプリを追加する予定
- これを AssetPipeline + CoffeeScript + jQuery で書くかというとそれはイヤだ
感想
個人的にはこれまで Browserify に寄せててどうしても Webpack と仲良くできる気がしてなかったんだけど、そんな自分でも Webpacker の導入は非常にスムーズに進んだ。
特に deploy について何も気にしなくてよかったのは本当に助かった。ビルドシステムを作ることに頭を使うのは全然やりたいことじゃないので。
ただ、やはり事前に少なくとも Node.js と Yarn の知識はあった方がよい。Webpacker のドキュメントでは Node.js 6.0+ / Yarn 0.25+ って書いてあったけど、Webpack はすでに "The current Long Term Support (LTS) release is an ideal starting point." と言っている。Webpacker はあくまで Webpack と Rails が仲良くする手法の一つなので、あくまで本家情報を大事にしよう。
おまけ
rake ( Rails 5.1- ) webpacker:install と rake webpacker:install:xxx は違う。そりゃそうだ。
- Heroku は package.json の情報を解釈してくれるので engines とかでおk
- CircleCI は package.json を解釈してくれないので circle.yml の中でこんな感じ ( 1.0 の場合 )
参考
- rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
- webpack
- Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ
- 考え方が参考になる
- Rails & Webpackerでフロントエンド開発環境を整える - Qiita
- 手順が参考になる
- Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜 | blog.tai2.net
- AssetPipeline 捨てるべき論
- Webpackerのディレクトリ構成をRailsから切り離す形に変える方法 - Qiita
- Webpacker独自の場所じゃない方がよくね論
- WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する - Qiita
- ビルドだけ AssetPipeline から分離する