Rails5の頃に作ったプロジェクトで、JS系のアセットの管理にはRails Assetsを使っている、Rails 5.1のプロジェクトが手元にありました。

先日(8/3)にそのRails Assetsが証明書の期限切れでbundle installできなくなるという問題が発生。これを期に管理方法を変えないとねということでRails 5.1から使えるYarnにすることにしました。

webpackerを使うのは遠すぎるのでやめました。

手順

node_modulesを読み込めるようにしておく

Rails 5.1にアップデートしたときに対応済かもしれませんが、asset pipelineのパスにnode_modulesを通しておきます。

# config/initializers/assets.rb

# ↓を追記

# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

package.jsonの用意

% yarn init

するとpackage.jsonが作られます。ただ、Railsが生成するファイルとは異なるので適当に削っておきます。おそらくdescriptionとか要らないはずなので。

こんな感じのファイルで良いはずです。

{
  "name": "my-project",
  "private": true,
  "dependencies": {}
}

パッケージの追加

bootstrapが使うpopper.jsと、アプリケーションが使っていたjquery-confirmをyarnで入れてみます。

$ yarn add popper.js jquery-confirm

ついでにGemfileの不要な記述は消しておきます。

-source 'https://rails-assets.org' do
-  gem 'rails-assets-popper.js'
-  gem 'rails-assets-jquery-confirm2'
-end

requireを変更

-#= require jquery
-#= require popper
-#= require jquery-confirm2

+#= require jquery/dist/jquery.js
+#= require popper.js/dist/umd/popper.js
+#= require jquery-confirm/dist/jquery-confirm.min.js

popper.jsはdistに3種類あって正しいものを指定しないとsyntaxエラーとなります。トランスパイラを使わない場合はumd/以下のコードを参照する必要がありました。

Popper.js is currently shipped with 3 targets in mind: UMD, ESM, and ESNext.
No idea what am I talking about? You are looking for UMD probably.

- UMD - Universal Module Definition: AMD, RequireJS, and globals;
- ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
- ESNext: Available in /dist, can be used with webpack and babel-preset-env;

cssがあるパッケージの場合はそちらも変更する必要があります。

-@import "jquery-confirm2"
+@import "jquery-confirm/dist/jquery-confirm.min.css"

おわり

多分これら手順で動くはず。