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"
おわり
多分これら手順で動くはず。