importmap-rails

rails 7から採用された新しいJSアセット管理

初期化

Gemfileに追加

+ gem "importmap-rails"

gemインストール

bundle install

importmapを使うための設定など諸々を追加

rails importmap:install

使い方

layoutなどを修正してHTMLのheadに以下を追加

    <%= javascript_importmap_tags %>

こうすると app/javascripts/application.jsが読み込まれる（application.jsはimportmap:installで自動作成される） 。

デフォルト以外にする

app/javascripts/application.js以外を使いたい場合（例えば、管理画面では app/javascripts/admin.js にしたい等）は以下のようにする。

    <%= javascript_importmap_tags("admin") %>

※ 未確認だがadminという名前は避けた方がいいかもしれない

またconfig/import.rbに以下の記述を追加する(デフォルトのapplication.jsのPINは最初から記述されているはず)

  pin "application"
+ pin "admin"

設定

例えばrails-ujsを使う場合は、app/javascripts/application.jsに以下の記述を追加

import Rails from "@rails/ujs";
Rails.start();

npmライブラリの追加

例えばlodashを追加

./bin/importmap pin lodash

vendor/javascript以下にインストールされ、config/importmap.rbに追加される。あと使いたい場所でimportする。例えばapp/javascripts/application.jsに追加する

import _ from 'lodash';