RailsアプリケーションでRailsをバージョンアップするときには、段階的に修正しては本番サーバーを更新、ということをやっています。
- JavaScriptの修正、パッケージの更新。
- 新しいRailsでwarningが出るところを修正。
- 最後に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つです。
- @rails/actioncable
- @rails/activestorage
- @rails/ujs
- turbolinks
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 にコピーします。使わないものはコピーしなくてもよいです。
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
ActionCable を使う場合は、6.0アプリケーションの app/javascript/channels 下から consumer.js と index.js もコピーします。
assetsのJavaScriptを削除
5.2アプリケーションで、assets の application.js からWebpackerに移すものを削除します。
- //= require rails-ujs
- //= require activestorage
- //= require turbolinks
ActionCableも移す場合は、各チャンネル用の xxx.coffee ファイルをバックアップしておいてから、channelsディレクトリを削除します。
assetsのJavaScriptを全部削除する場合
5.2アプリケーションで、JavaScriptをすべてWebpackerに移す場合は、app/assets/javascripts ディレクトリを削除します。
また、manifest.js からJavaScriptの設定を消します。
- //= link_directory ../javascripts .js
Gemfile から uglifier と coffee-rails を削除して bundle install します。さようならCoffeeScript。
- gem 'uglifier', '>= 1.3.0'
- gem 'coffee-rails', '~> 4.2'
produciton.rb から uglifier の設定を消します。
# Compress JavaScripts and CSS.
# config.assets.js_compressor = :uglifier
ActionCableを移す場合
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については確認していません。すいません。