目次
Vite.js とは
- Vite.jsは、高速で動作するビルドツール
- Vue.js作者Evan Youさんが開発し、2020年に発表された
- 従来のビルドツールと違い、開発時に全てのファイルをコンパイルしバンドルしない
- ES modulesのimportにより、必要なファイルだけをコンパイルしてブラウザに送るような仕組みで高速化している （プロダクションではバンドルする）
- Go 言語によって開発されたesbuild を使用して依存関係の事前バンドルを高速化
- 類似ツールに比べて設定が簡単
.tsファイルのインポートもサポートしているが、トランスパイルするだけで、型チェックはしない
Vite_ruby とは
- Vite Ruby は、Ruby アプリケーションに Vite.js を統合するためのライブラリ
- ウェブパッカーと同じように、アプリケーションのエントリーポイントを推測する
- エントリーポイントを参照するスクリプトやスタイルタグをレンダリングするタグヘルパーを提供し、Vite.jsによって処理されるようにする
環境
セットアップ
Rails
javascriptは不要なのでskipしてrails newします
$ rails new vite_rails --skip-javascript
vite_rails
vite_railsをGemfile に追加してbundle installします。
$ gem 'vite_rails'
vite
$ bundle exec vite install
Javascript + React という組み合わせで、frontendというディレクトリに作成します
$ yarn create vite
yarn create v1.22.17
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@3.1.0" with binaries:
- create-vite
- cva
✔ Project name: … frontend
? Select a framework: › - Use arrow-keys. Return to submit.
❯ Vanilla
Vue
React
? Select a framework: › - Use arrow-keys. Return to submit.
? Select a framework: › - Use arrow-keys. Return to submit.
✔ Select a framework: › React
✔ Select a variant: › JavaScript
Scaffolding project in /home/kei-kmj/dev/projects/rails/vite_rails/frontend...
Done. Now run:
cd frontend
yarn
yarn dev
Done in 18.19s.
config/vite.json
sourceCodeDirをapp/frontend から、Vite.jsで生成した frontend に書き換えます。
{
"all": {
"sourceCodeDir": "frontend",
"watchAdditionalPaths": []
},
設定の調整
frontend/package.json
package.json
package.jsonファイル２つ出来ているので、frontend/package.jsonをpackage.jsonにマージしてfrontend/package.jsonは削除します。
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"vite": "^3.1.4",
"vite-plugin-ruby": "^3.1.2"
}
}
frontend/vite.config.js
vite.config.ts
こちらも２つ出来ているので、vite.config.tsを書き換えて、frontend/vite.config.jsを削除します。
import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [ react(), RubyPlugin(), ], })
コンポーネント作成
Controller と View の作成
$ in/rails g controller hello index
app/views/layouts/application.html.erb
vite_railsが用意しているタグを追加します。
<%= vite_client_tag %>Hot Module Reload 用<%= vite_react_refresh_tag %>React 向け Hot Module Reload 用<%= vite_javascript_tag 'main.jsx' %>frontend/src/main.jsxを読み込みこむタグ
<!DOCTYPE html> <html> <head> <title>ViteRails</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= vite_client_tag %> <%= vite_react_refresh_tag %> <%= vite_javascript_tag 'main.jsx' %> </head> <body> <%= yield %> </body> </html>
app/views/hello/index.html.erb
書き換えます
<div id="root"></div>
routesの修正
hello#index をrootとして設定します。
config/routes.rb
Rails.application.routes.draw do root 'hello#index' end
Helloコンポーネントの作成
"Hello React!"と表示するコンポーネントを作成します。
frontend/src/components/Hello.jsx
const Hello = ({name}) => <h1>Hello,{name}!</h1> export default Hello
frontend/src/main.jsx
import React from 'react' import ReactDOM from 'react-dom/client' import Hello from './components/Hello' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <Hello name="React" /> </React.StrictMode> )
config/vite.json
エントリポイントを変更するためconfig/vite.jsonに"entrypointsDir": "src"を追加します
{
"all": {
"sourceCodeDir": "frontend",
"entrypointsDir": "src",
"watchAdditionalPaths": []
},
動作確認
動作確認してみます
$ bin/vite dev
$ bin/rails s
"Hello,React!"が表示されました
ソースコード
https://github.com/kei-kmj/vite_rails_hello
