Rails7でJavaScriptを読み込む方法について
Rails7でバンドルツールが変更されたため、備忘録もかね執筆しました。
本記事はimportmaps-railsを使用したJavaScriptの読み込み方法です。
Bootstrapや、postCSSを使用している方はesbuildでビルドを実施してください
対応手順
以下はapp/javascript/files配下に配置したtest.jsが読み込まれるようにするための設定です。
1. application.jsでファイルをロード
エントリーポイントのapp/javascript/application.jsに読み込むファイルをパス指定
import "@hotwired/turbo-rails";
import "controllers";
// 追記
import "./files/test";
2. importmapへのマッピング
importmapで使用しているconfig/importmap.rbにファイルが読み込まれるように記載します。
# 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パッケージを利用する場合
bin/importmap pin react
実行後、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"
以上です。
登録したファイルが読み込まれているか、確認してみてください。