ReactアプリのBuildツールをcraからviteに移行する

背景.cra(create-react-app)が非推奨になる

CRAが日推奨になるという情報を捕捉しました。
過去、制作したアプリケーションでCRAで構築したアプリケーションがあったため、
このたび、viteに移行することにいたしました。

*今まで、ありがとうCRA

移行先のViteとは？

次世代のフロントエンドビルドツール。
CRAに比べ、viteではビルドの速度が高速で100倍以上になるケースもあるのだとか。
その恩恵はプロジェクトの規模が大きくなればなるほど大きいといいます。

実行手順

いかに実施した移行の手順をまとめます。

1.Viteのインストール

yarn add --dev vite

*筆者の場合は、nodeのversionが16だったので、エラーが出てしまいました
Version18以上を推奨しているので、
node -vなどで事前にnodeのversionを確認しておくとGoodかと思います。

2.index.htmlの移行

viteのデフォルトでは、index.htmlはプロジェクトのルート配下を参照するので、ファイルを移動します。

mv /${project_root}/public/index.html /${project_root}/

3.環境変数のVite対応

環境変数もエラーが出てしまったので、Vite用にの環境変数の対応を変更します。

1.環境変数の prefix を REACT_APP_ から VITE_ に変更する
2.src/react-app-env.d.ts を src/vite-app-env.d.ts にリネームし参照先を変える
3.コードで参照する際の process.env を import.meta.env に変更する

# vite-app-env.d.ts
- <reference types="react-scripts" />
+ <reference types="vite/client" />

4.ビルド設定ファイルの修正

下記の設定ファイルを調整・追加しました。

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
      alias: [
        { find: './runtimeConfig', replacement: './runtimeConfig.browser' },
        { find: '@', replacement: '/src' },
      ],
    },
    plugins: [react()]
  })

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

各属性の意味はおりを見て、別の記事にまとめます。

その他、調べたこと

その他、細々、調べた内容もあるのでメモしておきます。

Q.「--dev」ってなんぞや？

yarn add --dev vite @vitejs/plugin-react

開発環境でのみ使用する(本番環境に不要な)パッケージをインストールする際のオプションです。
テストフレームワークやリントツール、ビルドツールなどは、開発時にのみ使用されるパッケージ

Q.HMRってなんぞや？

Hot Module Replacementの略だそう。
モジュールに変更があった際に、その変更をリロードなしに反映する仕組みだそうです。
yarnなどにもその仕組みはありましたが、
プロジェクトの規模が大きくなればなるほどHMRを使っても反映に時間がかかるようになってしまいました。

引用

CRAに移行されている方がいたので、参考にさせていただきました。

tsconfig.jsonのオプション関連

Vite公式

react-scriptsはwebpack-dev-serverを起動している

zsh/zshrcって何だっけ？

Viteにおける静的コンテンツの扱い