Rails6.0でWebpackerがデフォルトのJavascriptsのコンパイラーになりました。 Webpackerを使うことでWebpackが用意している様々な機能が使えるようになりますし、SplitChunksで簡単に最適化も行えます。 なので以前のRailsのバージョンを使ってアプリを構築している人は、SporocketsからWebpackerへの移行を考えていると思います。 でも肝心の移行方法は、Railsのオフシャルドキュメントでは軽く触れているだけで、十分ではありません。 英語では詳しい移行方法に触れたサイトはあるものの、このサイトを参照しても具体な手順は曖昧なところがあります。 そこで、具体的で簡潔なステップ・バイ・ステップでの移行方法の肝心なところを紹介します。 1.まずはwebpackerGemをGemfileに加えます ここでsprockets gemは残しておきましょう。cssのコンパイルにまだ使いますし、残しておいてもお互いの干渉はありません。 2.Webpackerのコンフィギュレーションを行います Webpackerの公式ページに詳しいコンフィギュレーションがありますが、基本以下の4つのファイルの設定です、 /config/webpack/loader/custom_loader.js /config/webpack/loader/erb.js /config/webpack/production.js /config/webpack/development.js まずjson-loaderとyaml-loaderの設定をcustom_loader.jsで行います。 次に .js.erbファイルが使えるようにrails-erb-loaderを読み込みます。これはRails自体に必要なのではないかな。。。
Ruby on Rail 5.1.0よりrails-ujsはRails本体に取り込まれました。 Unobstructed JavaScriptを提供するライブラリーとしてのjquery-ujsの役割はrails-ujsと重複です。また、Ruby on Rail 5.1.0からjqueryへの依存関係もなくなりました。 なので今後のメインテナンス、拡張性を考えてjquery-ujsからrails-ujsへ移行することにしました。 この記事では、移行の仕方を経験を踏まえて紹介します。 移行するまえに必要なこと 様々なシナリオをチェックするインテグレーションテストがあること ユニットテスト 他のGemをアップデート 1.application.jsでjquery-ujs を rails-ujsに変更 2.jQueryそのものを使い続けるかどうか決める 123ishでは当分の間jQueryは使い続けることにしました。というのも、使っているGemでjQueryに依存しているものもあり、今の時点では継続することにしまいした。ただ将来的には、jQueryを使うことはなくなるかも知れません。 3.インテグレーションテストをアップデート 色々とテストそのものをアップデートする必要もあります。 trigger() とネイティブなJavascriptである click()に変更 原因不明ながらCapybaraのclick_linkがBootstrapのモデルで使えなくなったので、不本意ながらexecute_scriptを使う。 セレクタ−としてidを使うことを徹底する。例えばclick_link("element-id")のようにidベースでコンポーネントを選んだほうが安定する 4.Sprocket からWebpackerへ移行している場合 require("@rails/ujs").start() を app/javascript/packs/application.js 先頭に入れる。これはCSRF セキュリティーエラーを起こさないために非常に重要です。 最後に jquery-ujs から rails-ujsへの移行は比較的スムーズに行なえます。 とはいえ、この移行も影響が色々とあるので、インテ