Rails+webpackの落ち穂拾い

Railsでwebpackによるビルド環境を整備した際の苦労話です。

Transcript

1. Rails+webpackの落ち穂拾い @kuy / Yuki Kodama 2016/06/10 at Modern Web App LT!
2. 自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ entrepedia（アントレペディア）の開発・運用 AWS, Ruby on Rails, JavaScript (React + Redux) • redux-sagaで非同期処理と戦う • Reduxでコンポーネントを再利用する • Reduxのmiddlewareを積極的に使っていく • ・・・など Qiita の記事 発表 • なぜReduxを使うのか
3. Rails + webpack 構成への移行（2週間前） 一筋縄ではいかなかった ↑ 思ったよりしょぼいな・・・
4. 妥協点 • assetsのファイル数が多すぎて移行できる気がしない • gemで提供されているjQuery、関連ライブラリどうしよう • モバイル版のこと忘れてた これ、終わらないよ？
5. 何が目的だったのか思い出す • デプロイ時間の短縮 • レガシーコードの駆逐 • レガシーライブラリへの依存解消 • フロントエンド向けの自動テストの導入
6. デプロイ時間の変化 Rails標準の構成：10分程度 browserify-rails導入：15分程度 Babel+React+Redux導入：45分程度
7. 妥協点 • assetsのファイル数が多すぎて移行できる気がしない ◦ → 今後メンテナンスをする複雑な機能に絞って移行 ◦ → 243個のJSファイルのうち187個のみ ◦ → CSSと画像ファイルはほぼ移行せず • gemで提供されているjQuery、関連ライブラリどうしよう ◦ → jQuery UIとか可能な限り削除した ◦ → 移行メリットの薄いものは放置現状維持 • モバイル版のこと忘れてた・・・ ◦ → pure.css + 最小限のJSを維持（超軽量）
8. デプロイ時間の変化 Rails標準の構成：10分程度 browserify-rails導入：15分程度 Babel+React+Redux導入：40分程度 webpack-rails導入：10分程度（最速 2分以内） 快適なデプロイ時間を取り戻した！ browserify-rails にお引き取りいただいた結果・・・
9. やっとこ落ち穂拾い
10. 落ち穂拾い #1：I18n Reactコンポーネントの国際化どうしよう I18n.t(...) みたいなやつ使いたい • Gemの i18n-js を試してみた ◦ Middlewareレベルで特定JSファイルの読み込みを横取りしてヘルパーと localeデータを流し込む方式 ◦ i18n.jsは読み込まれるけど、translations.jsがダメ ◦ Rails Middlewareの処理順をカスタムしてる人にはつらい もっとシンプルなやり方でいいんじゃない？
11. 落ち穂拾い #1：I18n chrome/webpack-rails-i18n-js-plugin を利用 • ヘルパー関数は Gem の i18n-js のものを利用 • やってることが単純なので最悪自作すればいい • Gemを増やさずに済んだ webpackのビルドが走ったらlocaleファイルを読み込んで 共通bundleに追加してくれればいい（webpack側に寄せる）
12. 落ち穂拾い #2：画像ファイルパス Reactコンポーネントでassetsの画像を表示したい image_tagを使いたい（ハッシュ付き） • とりあえずは必要な画像パスだけscriptタグにJSONで書き出し • localeファイルと同じ方法で解決できないか検討中 まだまだ俺たちの戦いは（ｒｙ
13. Thank you!