RailsアプリケーションでRailsをバージョンアップするときには、段階的に修正しては本番サーバーを更新、ということをやっています。

といった感じです。ここでは、Rails 5.2を6.0に上げる準備として、Rails 6.0で導入されたJavaScriptのパッケージを5.2アプリケーションで使ってみます。

コピペ元の6.0アプリケーションを作っておく

5.2と6.0のコードを比較したりコピペ元として使ったりするために、6.0アプリケーションを作成します。

% rails --version
Rails 6.0.3.4
% rails new foo --webpack=vue

JavaScriptパッケージの導入

Railsがデフォルトで使うJavaScriptは、6.0からはassetsからWebpackerに移されました。次の4つです。

5.2アプリケーションで、yarn add でパッケージを追加します。

% yarn add @rails/actioncable @rails/activestorage @rails/ujs turbolinks

6.0アプリケーションの app/javascript/packs/application.js から requireの行を5.2アプリケーションの application.js にコピーします。使わないものはコピーしなくてもよいです。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

ActionCable を使う場合は、6.0アプリケーションの app/javascript/channels 下から consumer.js と index.js もコピーします。

5.2アプリケーションで、assets の application.js からWebpackerに移すものを削除します。

app/assets/javascripts/application.js

- //= require rails-ujs
- //= require activestorage
- //= require turbolinks

ActionCableも移す場合は、各チャンネル用の xxx.coffee ファイルをバックアップしておいてから、channelsディレクトリを削除します。

5.2アプリケーションで、JavaScriptをすべてWebpackerに移す場合は、app/assets/javascripts ディレクトリを削除します。

また、manifest.js からJavaScriptの設定を消します。

app/assets/config/manifest.js

- //= link_directory ../javascripts .js

Gemfile から uglifier と coffee-rails を削除して bundle install します。さようならCoffeeScript。

Gemfile

- gem 'uglifier', '>= 1.3.0'
- gem 'coffee-rails', '~> 4.2'

produciton.rb から uglifier の設定を消します。

config/environments/production.rb

  # Compress JavaScripts and CSS.
  # config.assets.js_compressor = :uglifier

ActionCable用のJavaScriptを移す場合は、6.0アプリケーションで、rails g を使ってチャンネル用のJavaScriptのひな形を作ります。次の例では、5.2アプリケーションにuserチャンネルがあるものとします。

% bin/rails g channel user

6.0アプリケーションの app/javascript/channels から user_channel.js をコピーして5.2に移します。あとは、保存しておいた user.coffee のコードを user_channel.js で動くように移植します。

このやり方で、ActionCable用のJavaScriptが動くことは確認しました。Turbolinksとrails-ujsも、まあたぶん大丈夫でしょう。

ActiveStorage用のJavaScriptについては確認していません。すいません。