Rails のフロントエンドツールに vite_rails を使う

Rails7からフロントエンドで使えるツールのオプションが増えました。jsのデフォルトはimportmap-rails、モジュールバンドラーを使いたい場合はjsbundling-railsでwebpack, esbuild, rollupが選べます。

ビルドが早いと言われているesbuildを使うのも良いですが、まだ開発中の機能もあります。
開発環境は高速化して、安定して本番ビルドできるツールを探したところvite_railsが良さそうでしたので試してみました。

vite_rails とは

ビルドツール Vite を Rails に最適化したライブラリです。基本的に Webpacker でできることは網羅しています。

特徴

• エントリーポイントを自動検出
  • app/frontend/entorypoints以下のファイルを自動で検出してビルドします。
• 高速なHMR（Hot Module Replacement）ができる
  • 事前ビルドにesbuildを使っている
• assets:precompileと自動的に統合
  • 本番ビルドのフローの変更をしなくて良いので、Webpacker からの移行も簡単
  • rollupを使ってビルドする
• script, link のタグヘルパーがある
  • vite_javascript_tag, vite_stylesheet_tag
• デフォルトの設定が充実している
  • 複雑な設定をしなくても使える

使ってみる

まずはgemをインストールします。

Gemfile

gem 'vite_rails'

$ bundle install

gemインストール後に、初期設定します。

$ bundle exec vite install

• 初期設定では以下を行います。
  • 開発サーバーの起動スクリプトbin/viteの追加
  • vite, vite-plugin-rubyのインストール
  • 設定ファイルvite.config.ts, config/vite.jsonの作成
  • エントリーポイントのapplication.js作成
  • application.html.erbにタグヘルパー挿入

開発サーバーを立ち上げれば、いままでどおり開発ができます。

$ foreman start -f Procfile.dev

...

11:33:37 web.1  | * Listening on http://127.0.0.1:5100
11:33:37 web.1  | * Listening on http://[::1]:5100
11:33:37 web.1  | Use Ctrl-C to stop
11:33:37 vite.1 |
11:33:37 vite.1 |   VITE v4.0.1  ready in 150 ms
11:33:37 vite.1 |
11:33:37 vite.1 |   ➜  Local:   http://127.0.0.1:3036/vite-dev/
11:33:37 vite.1 |   ➜  press h to show help

初期設定後のファイルを確認

初期設定されたファイルを確認してみましょう。

foremanで Rails と Vite の開発サーバーを起動するため、Procfileが作成されます。

Procfile

vite: bin/vite dev
web: bin/rails s

jsのエントリーポイント app/frontend/entrypoints が作成されます。Webpackerなどでapp/javascriptディレクトリがある場合は、app/javascript/entrypointsになります。

$ tree app/frontend
app/frontend
└── entrypoints
    └── application.js

設定ファイルも作られます。ポートやプラグインの設定ができますが、特に変更しなくても問題ありません。
プラグインvite-plugin-rubyがimportされていますが、Railsの場合vite-plugin-railsにするとerbがホットリロードできるようになるので便利です。

config/vite.json

{
  "all": {
    "sourceCodeDir": "app/frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    RubyPlugin(),
  ],
})

Vite 用のヘルパータグが layout に設定されます。これでビルド時に script タグに変換されます。
スタイル用のvite_stylesheet_tag、アセット用のvite_asset_pathなどのヘルパーも利用できます。

app/views/layouts/application.html.erb

...

<%= vite_javascript_tag 'application' %>

...

まとめ

簡単にセットアップできましたね。新しい概念が追加されているというより、機能はそのままで、新規、既存どちらでも導入が簡単なことがメリットになりそうですね。
最近のフロントエンドの技術進化は速く、使うツールも変わることが多いので、その時の状況に合わせて試していきたいと思います。

References