手持ちのレガシー目なRails案件をいい加減Webpackerに直す活動を始めていまして、まずは仕事以外のプロジェクトからやってます。

JS用のgemだったりrails-assetsあたりはyarn化の時点でだいたい撲滅できていいですね。

ですが、RubyのコードがメインでJSも持っているようなgemではwebpacker化したときにJSをビルドできないという問題が起こります。

例えばcocoon gemがそうです。

GitHub - nathanvda/cocoon: Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms

Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms - GitHub - nathanvda/cocoon: Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms

github.com

その場合はERBの仕組みを使って、gemのパスから対象のJSファイルをインポートするような書き方を取れば大丈夫、とcocoonおissueにありまして、実際それで解消しました。

Changes related to RoR 5.1 optionable Webpacker · Issue #452 · nathanvda/cocoon

↓コマンドでインストールして、

% rails webpacker:install:erb

config/webpacker.ymlも一部変更して、

# config/webpacker.yml
default: &default
  # Search jQuery in node_modules of the application and not in the cocoon directory
  resolved_paths: ['node_modules/jquery/dist']

最後にapp/javascript/packs/application.jsをapp/javascript/packs/application.js.erbとリネームした上で、gemのパスを含めたファイルのパスを指定してインポート等すればOK。

// app/javascript/packs/application.js.erb
import "<%= File.join(Gem.loaded_specs['cocoon'].full_gem_path, 'app', 'assets', 'javascripts', 'cocoon') %>"

おかげでJSを含んだgemの対応も問題なくいけました。