背景
react-scriptsを使っているとreact-scriptsのバージョンが古すぎて他のパッケージと競合が起きる問題が発生しました
create-react-app がどうやらメンテされなくなったようで react-script が邪魔をして TypeScript を5以降にバージョンアップできなくなりました。そのため、create-react-app で作成されたアプリケーションを Vite に移行することにしました。
Vite
Viteは、高速で効率的な開発環境と、最適化された本番ビルドを提供することを目的としています。Vue.jsの作者であるEvan Youさんによって開発されました。Viteは非常に高速で、開発者体験の向上を目指して設計されています。
前提条件
- すでにreact-scriptsで作成されたプロジェクトがある
- Node.js（バージョン12以上）
- npm
導入手順
Vite を導入
不要なreact-scriptsをアンインストール
npm uninstall react-scripts
Viteのインストール
npm install --save-dev vite @vitejs/plugin-react
各ファイルの修正
プロジェクト配下にvite.config.tsの作成
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
server: {
open: true, // 自動でブラウザを開く
port: 3000, // ここでポート番号を指定します
},
build: {
outDir: 'build', // ビルドの出力先ディレクトリ
},
plugins: [react()],
});
index.html の更新(移動)
index.html を public/ ディレクトリからプロジェクトのルートディレクトリに移動します
mv public/index.html .
index.html 内の %PUBLIC_URL% を全て削除します。
("%PUBLIC_URL%/favicon.ico” → "public/favicon.ico” といった感じに変更)
/src/index.tsx を読み込む <script> タグを追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" href="public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- Noto Sans JPフォント読み込み -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap"
/>
<!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
react-app-env.d.tsの更新
- /// <reference types="react-scripts" />
+ /// <reference types="vite/client" />
環境変数
環境変数名は REACT_APP_* にしていたものを VITE_* に変更します。
VITE_HOGE=hoge
VITE_FUGA=fuga
scripts を更新
"scripts": {
"start": "vite",
"build": "tsc --noEmit && vite build",
"serve": "vite preview",
"test": "jest",
実行
ステップ1: node_modulesフォルダとpackage-lock.jsonファイルを削除する
まず、node_modulesフォルダとpackage-lock.jsonファイルを削除して、現在の依存関係をクリーンアップします。
rm -rf node_modules package-lock.json
ステップ2: キャッシュをクリアする
npmのキャッシュをクリアして、潜在的なキャッシュ関連の問題を防ぎます。
npm cache clean --force
ステップ3: 依存関係を再インストールする
再インストールするためにnpm installを実行します。
npm install
Github Pagesにデプロイしたら真っ白になるエラー
上記の設定のままデプロイしてしまうと画面が真っ白なものが反映されてしまいます。
これはGithub PagesのURLにあるhttps://〇〇.github.io/リポジトリ名/ のリポジトリ名 の箇所がうまく設定されていないため。
これを解決すべくGithubActionsでのみパス(リポジトリ名 )を加えてあげる様にする
package.jsonに以下を追加
"scripts": {
"build:github": "tsc --noEmit && vite build --mode github",
build:githubをGithubActionsで十個するようにworkflowを変更
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Install dependencies
run: npm install
- name: Build
run: npm ci && npm run build:github && cp build/index.html build/404.html
...
vite.config.tsを以下に変更
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => {
return {
base: mode === "github" ? '/リポジトリー名/' : '/',
server: {
open: true,
port: 3000,
},
build: {
outDir: 'build',
},
plugins: [react()],
}});
--mode githubというフラグを設定しているのでその場合は/リポジトリー名を参照する様になります
まとめ
Viteへの移行は、開発体験の向上とビルド時間の短縮に大いに役立ちます。最初は少し戸惑うかもしれませんが、Viteの設定は非常にシンプルで、少しの手間で大きなメリットを享受できます。ぜひ試してみてください！
Discussion