初めに

Rails7からアセットパイプラインはimportmap esbuild webpack rollupの 4 つの選択肢があります。
ですが、新たにvite_railsという選択肢をここで紹介させていただきます。

なぜ vite_rails なのか

webpackerからの移行する方法になります。

Gemfileにvite_railsを追加します。

Gemfile

gem 'vite_rails'

ターミナル

$ bundle install

$ bundle exec vite install
設定ファイルを作成する

デフォルトではapp/frontendがエントリーポイントになっていますので、app/javascriptに変更します。

config/vite.json


{
  "all": {
    "sourceCodeDir": "app/javascript",
  }
  // 省略
}

application.html.erbにある読み込みのタグヘルパーを変更する。

app/views/layouts/application.html.erb


- <%= javascript_packs_with_chunks_tag 'application' %>
+ <%= vite_javascript_tag 'application' %>

そして、require.contextをimport.meta.globEagerに書き換える。

- const context = require.context("./controllers", true, /\.js$/)
+ const controllers = import.meta.globEager('./**/*_controller.js')