rails 6ではassets pipelineがデフォルト無効になり、jsはwebpackerで管理されるようになった。
ところがRails 5からアップグレードした場合webpackerは自動的に有効にならず、assets pipelineは無効にされるので、ujsで動いてるリソースのdeleteリンクなどが効かなくなってしまうようだ。
そこでrails 5からアップグレードする際の webpacker を有効にする手順を記録しておく。
ただし、これは独自のJSコードがほとんどなく、ujsを利用している程度の小規模アプリの移行例である。JSをガッツリ記述し、assets pipelineでビルドしているアプリの場合、webpackerで動作するようにJSの書き直しが必要になるかもしれない。
0. Node.JSのアップデート
Rails 6のwebpackerはnode v8.12.0以降を要求します。node v8.x系はobsoletedなのでv10.x以降にアップデートしましょう
1. webpackerのインストール
Gemfileの修正
以下を追加
gem 'webpacker', '~> 4.x'
以下は不要なのであったら消す
gem 'jquery-rails'
Gemのインストール
bundle install
webpackerをインストール
./bin/rails webpacker:install
2. rails-ujsをインストール
以下を実行。yarnコマンドがなければ別途 npm install -g yarn
や brew install yarn
などでインストールする
yarn add @rails/ujs
なお yarn add rails-ujs
と書かれている文献もあるが、rails-ujs
は Rails 5 までのnpmライブラリ名。Rails 6から @rails/ujs
に移動している。
3. application.js の移動
- app/assets/javascripts/application.js は削除
- app/javascripts/packs/application.js を作成
application.jsの中身
app/assets/javascripts/application.jsは以下のようになっているはず。これは不要なので削除
//= require jquery //= require jquery_ujs
app/javascripts/packs/application.jsに以下の記述を追加
import Rails from '@rails/ujs'; Rails.start();
jsを読み込んでるテンプレート側の修正。
- <%= javascript_include_tag 'application' %> + <%= javascript_pack_tag 'application' %>
4. initializerの修正
confg/initializers/assets.js から設定を削除
- Rails.application.config.assets.precompile += %w( application.js )