Zenn
Closed8

Create React App で作成した React アプリを Vite に乗り換える

React
Vite
Create React App
shingo.sasakishingo.sasaki

"react-scripts": "3.4.1" を使用している状態から Vite への移行を試みる

shingo.sasakishingo.sasaki

プロジェクトを作成する

$ yarn create vite my-react-app --template react-ts
$ cs my-react-app

ディレクトリ構成はこんな感じ

$ tree
.
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
package.json
{
  "name": "my-react-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^1.0.0",
    "typescript": "^4.3.2",
    "vite": "^2.6.4"
  }
}

ポイントは vite @vitejs/plugin-react を使うってとこぐらい。

shingo.sasakishingo.sasaki

vite 自体の設定ファイル

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

型解決するやつ

src/vite-env.d.ts
/// <reference types="vite/client" />

エントリーポイント

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

この辺を抑えておけば、既存の React アプリの置き換えもできそうかな。

shingo.sasakishingo.sasaki

ここから既存プロジェクトのほうの対応

パッケージのインストール

$ yarn add -D vite @vitejs/plugin-react

前述の vite.config.ts index.html src/vite-env.d.ts を配置しておく。

npm スクリプトも追加する

package.json
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },

src/index.js を src/main.tsx にリネームもしておく

shingo.sasakishingo.sasaki

軽く動かしてみた感じ、特にアプリケーションの挙動に問題なし。
立ち上がりは本当に CreateReactApp より圧倒的に早い。

依存関係がそんな複雑じゃない軽量のアプリでもこれだけ快適になるのは大きい。
差分ビルドも試してみた限りは高速で、HMRがこんなに早く反映されていいのかってぐらい。

shingo.sasakishingo.sasaki

あと処理

$ yarn remove react-scripts

$ rm src/react-app-env.d.ts src/serviceWorker.js
このスクラップは2021/11/20にクローズされました