皆さんこんにちは。株式会社オルトプラスの楠元です。今回はあるプロジェクトで私が対応した、ビルドツールをreact-app-rewiredからViteへ移行した際の話をしたいと思います。参考サイトや公式ドキュメントを読んでサクッと実施できるかと思いきや、かなり苦戦したのでその戦いの記録的な記事になるかと思います。これから移行を検討される方のご参考になれば幸いです。
それでは、本題に入っていきましょう！※本記事で扱う情報は、2023年4月対応時点の情報を主としています。
まず初めに、移行を実施したプロジェクトのシステム情報とViteについて触れておきます。今回対応したプロジェクトは React + TypeScript を採用し、 react-app-rewired を使ってビルドしていました。
Viteを超雑に一言で言うと、「フロントエンドの開発で使える便利なビルドツール」です。なんとVue.jsの開発者と同じ方が開発されたそうです！詳細は公式ページや各自で検索していただければと思います。
当時のプロジェクトで移行したいと考えたVite最大の利点は、起動時間の短縮による開発体験向上です。特にローカル環境だと、yarn startを実行してからページの描画が完了するまで10秒くらい掛かっていて地味にストレスでした。
移行作業に際して以下のサイトを参考にしました。
ビルドシステムをcreate-react-appからViteに移行した話 - Sansan Tech Blog
>yarn add vite
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "rxjs@>=7.0.0".
warning " > [email protected]" has unmet peer dependency "eslint@>=7.0.0".
warning "react-router-dom > react-router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
warning " > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @esbuild/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 36.50s.
>yarn add @vitejs/plugin-react
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "rxjs@>=7.0.0".
warning " > [email protected]" has unmet peer dependency "eslint@>=7.0.0".
warning "react-router-dom > react-router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
warning " > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
└─ @vitejs/[email protected]
info All dependencies
├─ @ampproject/[email protected]
├─ @babel/[email protected]
├─ @jridgewell/[email protected]
├─ @jridgewell/[email protected]
├─ @jridgewell/[email protected]
├─ @jridgewell/[email protected]
└─ @vitejs/[email protected]
Done in 104.11s.
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
build: {
outDir: 'build', // CRAに合わせて指定してください
},
});
"scripts": {
- "start": "env-cmd -f .env.local react-app-rewired start",
- "build:production": "env-cmd -f .env.production react-app-rewired build",
- "build:staging": "env-cmd -f .env.staging react-app-rewired build",
- "eject": "react-scripts eject"
+ "start": "env-cmd -f .env.local vite",
+ "build:production": "env-cmd -f .env.production tsc --noEmit && vite build",
+ "build:staging": "env-cmd -f .env.staging tsc --noEmit && vite build"
},