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に書いてしまいたいですね。

移行手順

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

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

yarn add rails-ujs activestorage

packs/application.jsから呼び出す

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

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

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

assets/javascripts/application.jsを消す

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

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

application.html.erbの

javascript_include_tag 'application'

の削除も忘れずに。

これで移行は完了です!