Rails 5からRails 6へのアップグレードでujsをwebpacker化する

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以降にアップデートしましょう

以下を追加

gem 'webpacker', '~> 4.x'

以下は不要なのであったら消す

gem 'jquery-rails'

bundle install

./bin/rails webpacker:install

以下を実行。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 に移動している。

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' %>

confg/initializers/assets.js から設定を削除

- Rails.application.config.assets.precompile += %w( application.js )