Zenn
🚵

create-react-appからviteへの移行

2024/09/18に公開
React
Vite
Create React App
tech

やりたいこと

create-react-appで作成したReactのアプリケーションをviteへ移行したい
私がReactを学び始めた頃はcreate-react-appでプロジェクトを作成するのがベストプラクティスだったのですが、最近はcreate-react-appはメンテナンスされていないようで徐々にアンチパターンとされているみたいです。
Viteが最近の注目で、今回はこちらにMigrationしてみました。

先に感想を書いておきますがサーバーの起動が速くなって結構開発者体験の向上を実感します。
前提としてTypeScriptを導入していないReactアプリケーションの移行となっています。（TypeScriptを導入している場合でもほとんど作業自体は変わらないです。）

What is Vite?

そもそもViteとはモダンなフロントエンドのビルドツールです。
開発サーバーのセットアップ、ビルドツール、コードのホットリロード、最適化など、フロントエンドの開発におけるさまざまな便利な機能を提供してくれます。
https://vitejs.dev/

Migration Steps

こちらがVite移行のための4ステップです。

  1. 既存の依存関係の削除
  2. Vite のインストール
  3. フォルダ構成の変更
  4. 環境変数の変更

1. 依存関係の削除

プロジェクトルートで、既存の依存関係に関連するファイルを全て削除します。

// Clear dependencies
rm -rf node_modules package-lock.json

2. Viteのインストール

次にViteのインストールです。
詳しい情報は省いているので、詳細を確認したい場合はこちらを確認してみてください。
https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react

// Install Vite
npm install --save-dev vite @vitejs/plugin-react

// Uninstall react-scripts
npm uninstall react-scripts

ついでに、使わなくなるreact-scriptsはアンインストールしてしまいましょう。

3. フォルダ構成の変更

次にViteのルールに沿ったフォルダ構成にするために、いくつか変更を加える必要があります。

  • index.htmlをプロジェクトルートへ移動
    • create-react-appのままだと、public/index.htmlになっているはずなのでこれをルートへ移動させます
  • index.jsをmain.jsxへrename
  • ファイル名を　.js -> .jsx へrename
    • こちらは一括変換してしまえば楽です
  • vite.config.jsを作成
    • デフォルトのポートを3000に指定し、ブラウザを自動起動する設定を追加（これは任意です）

必要最低限のvite.config.jsの例です。この設定ファイルを自分好みにカスタマイズ可能です。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
})

4. 環境変数の変更

最後に環境変数の名前と読み込み方法が変わります。
もし環境変数を使用していない場合はスキップでOKです。
参考：https://zenn.dev/kachuno/articles/4b2e6d8e1a944f

env.development
- REACT_APP_BASE_URL="http://localhost:8000"
+ VITE_BASE_URL="http://localhost:8000"
js
- process.env.REACT_APP_...
+ import.meta.env.VITE_...

以上、上記4ステップで、思ったよりも簡単に移行できます。

Discussion