ホームページ >ウェブフロントエンド >jsチュートリアル >Create React App から Vite への移行: 開発者ガイド
Create React App から Vite への移行: 開発者ガイド
- DDDオリジナル
- 2024-12-30 21:55:10963ブラウズ
Create React App から Vite への移行: 開発者ガイド
開発者の皆さん、こんにちは！ ?
最近、私は実稼働 React アプリケーションを Create React App (CRA) から Vite に移行するという課題に取り組みました。結果？ビルド時間は 3 分からわずか 20 秒まで大幅に短縮されました。 ?
このガイドでは、何時間ものデバッグ時間を節約できる JavaScript ファイルでの JSX の処理に関する重要なヒントを含め、移行プロセス全体を説明します。
? Vite に切り替える理由
技術的な詳細に入る前に、この切り替えを行う理由を見てみましょう。私たちのチームはいくつかの印象的な改善を確認しました:
| Metric | Before (CRA) | After (Vite) |
|---|---|---|
| Dev Server Startup | 30s | 2s |
| Hot Module Replacement | 2-3s | <100ms |
| Production Build | 3 min | 20s |
| Bundle Size | 100% | 85% |
さらに、次の素晴らしい機能も利用できます:
- ⚡️超高速 HMR
- ?開発中のバンドルはありません
- ?よりシンプルな構成
- ?エラーメッセージの改善
- ?ネイティブ TypeScript サポート
?移行手順
1. プロジェクトを準備する
まず、新しいブランチを作成します。
git checkout -b feature/migrate-to-vite
2. 依存関係を更新する
CRA を削除して Vite を追加します:
# Remove CRA dependencies npm uninstall react-scripts @craco/craco # Install Vite and related dependencies npm install -D vite @vitejs/plugin-react
3.Viteの設定
プロジェクトのルートに vite.config.js を作成します:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [
react({
// ? Key configuration for .js files with JSX
include: "**/*.{jsx,js}",
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
open: true,
},
build: {
outDir: 'build',
sourcemap: true,
},
});
重要: include: "**/*.{jsx,js}" 設定は重要です。これがないと、Vite は .jsx ファイル内の JSX のみを処理します。
4. 環境変数
Vite は環境変数を異なる方法で処理します:
- .env ファイルを保持します
- 変数の名前を REACT_APP_ から VITE_ に変更します
- リファレンスを更新:
// Before (CRA) process.env.REACT_APP_API_URL // After (Vite) import.meta.env.VITE_API_URL
5. パッケージスクリプトの更新
package.json 内のスクリプトを置き換えます:
{
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest",
"lint": "eslint src --ext .js,.jsx"
}
}
6.index.htmlを移動する
- public/index.html をルートに移動
- 更新してください:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your App Name</title>
</head>
<body>
<div>
<h2>
? Common Challenges and Solutions
</h2>
<h3>
1. JSX in .js Files
</h3>
<p>This is usually the first hurdle. You have two options:</p>
<h4>
Option 1: Configure Vite (Recommended)
</h4>
<p>Add the include option as shown in the config above.</p>
<h4>
Option 2: Rename Files
</h4>
<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;
2. 絶対輸入
vite.config.js を更新します:
resolve: {
alias: {
'@components': '/src/components',
'@assets': '/src/assets',
'@utils': '/src/utils'
}
}
3.SVGのサポート
vite-plugin-svgr をインストールして構成します:
npm install -D vite-plugin-svgr
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [react(), svgr()],
// ...
});
✅ 移行チェックリスト
コミットする前に:
- [ ] 開発サーバーが起動します
- [ ] ホットモジュール交換作業
- [ ] 環境変数にアクセスできます
- [ ] ビルドプロセスは成功しました
- [ ] インポート パスは正しく解決されます
- [ ] SVG とアセットの読み込み
- [ ] CSS モジュールは機能します
?結論
CRA から Vite への移行は困難に思えるかもしれませんが、パフォーマンスが向上するため、移行する価値はあります。覚えておいてください:
- .js ファイルの JSX 処理を早期に構成する
- 環境変数を更新する
- インポート パスを確認する
- 徹底的にテストする
React アプリを Vite に移行しましたか?どのような課題に直面しましたか?コメントであなたの経験を共有してください!
これは役に立ちましたか? React と JavaScript のヒントをさらに知りたい方はフォローしてください!
コメントやご質問には積極的にお答えいたします。移行プロセスについて説明が必要な場合はお知らせください。
以上がCreate React App から Vite への移行: 開発者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。