【Rails5用】rails-ujsとactivestorageの依存をsprocketsからnpmに移行する

問題

rails new myapp --webpack

でwebpackerベースでRailsプロジェクトを作成しても、assets/javascripts/application.jsが残っていて、そこにはsprocketsベースの記述が残っています。

↓これ

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage

rails-ujs,activestorageは使いたいが、sprocketsベースの記述は技術的負債になるので書きたくない。。。

せっかくwebpacker使ってるのだからjsの依存は全部package.jsonに書いてしまいたいですね。

移行手順

1. rails-ujs,activestorageをpackage.jsonに追記

rails-ujs、activestorageともにnpmモジュールが提供されているので、追記します

yarn add rails-ujs activestorage

2.packs/application.jsから呼び出す

packsのほうのapplication.jsの上の方の以下のコードを追記します。

import Rails from 'rails-ujs'
Rails.start()

import * as ActiveStorage from 'activestorage'
ActiveStorage.start()

3.assets/javascripts/application.jsを消す

これでwebpackベースのapplication.jsにrails-ujsとactivestorageの移行することができました。

assets/javascripts/application.jsは削除してしまいましょう。

application.html.erbの

javascript_include_tag 'application'

の削除も忘れずに。

これで移行は完了です！

ちなみにRails6だと

ruby 3.0, rails 6.1.0では、

rails new myapp --webpack

でプロジェクトを作成すると、本記事で解説した移行手順は不要で、すでにSprocketsを使わない構成になっています。

デフォルトで作られるapplication.jsはこんな感じ。

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()