初めに
Rails7からアセットパイプラインはimportmap esbuild webpack rollupの 4 つの選択肢があります。
ですが、新たにvite_railsという選択肢をここで紹介させていただきます。
なぜ vite_rails なのか
- 開発サーバーは非常に高速に起動し、変更が即座に更新される。(ホットリロード)
- 基本的にデフォルトの設定で動作し、構成が簡単である
- デプロイ時は
assets:precompileでバンドルができる。 - css や sass などもバンドルできる。
導入方法
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')