Rails7でJavaScriptを読み込む方法について
Rails7から、バンドルツールが変更されたため、備忘録もかね、簡単にまとめました。
※本記事はimportmaps-railsを使用したJavaScriptの読み込み方法です。
Bootstrapや、postCSSを使用している方はesbuildなどのビルドツールでビルドしてください。
postCSSの環境構築については別途記事作成しておりますので、ご一読いただけると嬉しいです。
Step1
app/javascript/application.jsに読み込むファイルをパス指定
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails";
import "controllers";
// 追記
import "./test/test";
Step2
importmapへのマッピング
Rails7より、JavaScrpitのバンドラーが、webpackerから、importmapsへと変更されています。
（importmapは厳密にいうとバンドラーではないですが、、)
importmapで使用しているconfig/importmap.rbにファイルが読み込まれるように記載する必要があります。
以下はapp/javascript/files配下に配置したjavascriptファイルが読み込まれるようにするための設定です。
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
# 追記
pin_all_from 'app/javascript/files', under: 'files'
importmap の 基本的なコマンド
-
pin- 指定したファイルをマッピングに追加
-
pin_all_from- 指定したディレクトリ以下のファイル一式をマッピングに追加
npmパッケージを利用する場合
例） react
bin/importmap pin react
実行後、config/importmap.rb にパッケージのマッピング情報が追加されていると思います。
# config/importmap.rb
pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js"
pin "react-dom", to: "https://ga.jspm.io/npm:react-dom@17.0.2/index.js"
pin "object-assign", to: "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
pin "scheduler", to: "https://ga.jspm.io/npm:scheduler@0.20.2/index.js"
以上です！
登録したファイルが読み込まれているか、確認してみてください〜