RailsとViteの連携は、Vite Ruby(vite_rails)がこれまで唯一の選択肢でしたが、Laravel(PHP)のViteプラグインにインスパイアされて開発された、新たな選択肢が登場しました。
まだバージョンは若いですが、RailsサーバとViteの連携を問題なく行えます。
また、vite_railsのユーザー(ヘビー？)により開発されているため、vite_railsから容易に移行できます。
特徴
Rack Proxy要らず
vite_railsはRailsサーバーとViteの連携にRack Proxyを利用していますが、プロキシなしにRailsサーバーとViteの連携を行います。
独自の設定ファイルなし
vite_railsにはViteとの連携の設定を記述する config/vite.json が存在しましたが、独自の設定ファイルは存在しません。
How It Works
Rackプロキシも、config/vite.jsonも、余計なbinstubsも必要ありません。
Development
Viteプラグインが開発サーバーのURLを tmp/rails-vite.json に書き込み、Railsのヘルパーがそれを読み取って、Viteを直接参照するscriptタグを生成します。ブラウザはViteと直接通信を行うため、Puma（Railsサーバー）がアセットを処理することはありません。
Production
vite build は、標準的なViteマニフェストと共に public/vite/ ディレクトリへフィンガープリント付きアセットを出力します。Railsのヘルパーがそのマニフェストを読み取り、適切なタグを生成します。
インストール
gem "rails_vite"
bundle install
bin/rails generate rails_vite:install
Vite 設定
Viteまわりの設定は、Viteの設定ファイルである vite.config.js(|ts)に記述します。
import { defineConfig } from 'vite';
import rails from 'rails-vite-plugin';
export default defineConfig({
plugins: [
rails(),
],
});
フロントエンド
ソース・ディレクトリ
app/frontend にフロントまわりのコードを置く場合、次のように記述します。(app/javascriptがsourceDirのデフォルト値です。)
import { defineConfig } from 'vite';
import rails from 'rails-vite-plugin';
export default defineConfig({
plugins: [
rails({ sourceDir: 'app/frontend' }),
],
});
エントリーポイント
(sourceDir)/entrypoints がある場合、(sourceDir)/entrypointsを
、ない場合、(sourceDir)直下を、エントリーポイントの置き場所とします。
View Helper
Viteはビルド結果のファイル名にdigest(内容から算出されるハッシュ値)を付与するため、Rails標準のView Helperを利用できないので、vite_rails同様、独自のヘルパーが用意されています。
| Helper | 説明 |
|---|---|
| vite_tags(*entries, **options) | スクリプト/スタイルシート モジュール・リロードのタグに対応、拡張子必須 |
| vite_javascript_tag(*entries, **options) | vite_tagsと同じ、拡張子.js必須 |
| vite_stylesheet_tag(*entries, **options) | vite_tagsと同じ、拡張子.css必須 |
| vite_typescript_tag(*entries, **options) | vite_tagsと同じ、拡張子.ts必須 |
| vite_asset_path(name) | マニフェストからフィンガープリント付きのパスを返します |
| vite_image_tag(name, **options) | マニフェストによって解決されたsrcを持つ画像タグ |
Vite Ruby (vite_rails)からの移行
手順
bin/rails generate rails_vite:install
ジェネレータを実行/上書き後、上書き前との差分を反映(書き戻)します。
削除すべきファイル
- bin/vite
- config/vite.json
修正すべきファイル
- Procfile.dev
- vite.config.js(|ts)
Procfile.dev
基本、ジェネレータにより作成/上書きされます。
上書きされない場合、Viteまわりを次のように書き換えます。
# vite: bin/vite dev
js: pnpm vite
vite.config.js(|ts)
Vite プラグインを導入している場合、その設定を反映します。
上書きせず、vite_rails用の設定を削除し、RailsVite用の記述を追加する、のもありです。
移行例
参考