Create React App から Vite への移行: ステップバイステップ ガイド

React 開発者として、私たちは開発エクスペリエンスとアプリケーションのパフォーマンスを向上させる方法を常に模索しています。検討すべき重要なアップグレードの 1 つは、Create React App (CRA) から Vite への移行です。 Vite は、ビルド時間の短縮、ホット モジュール交換 (HMR) の迅速化、およびより合理化された開発エクスペリエンスを提供します。この包括的なガイドでは、プロキシ サーバーの処理や Gzip 圧縮の有効化など、CRA プロジェクトを Vite に移行するプロセスを順を追って説明します。

目次

1. Vite に移行する理由
2. 前提条件
3. ステップ 1: 新しい Vite プロジェクトを作成する
4. ステップ 2: ソース コードを移動する
5. ステップ 3: Package.json を更新する
6. ステップ 4: Vite を設定する
7. ステップ 5: インポート ステートメントを更新する
8. ステップ 6: 環境変数を処理する
9. ステップ 7: テスト構成を更新する
10. ステップ 8: プロキシ サーバーを構成する
11. ステップ 9: Gzip 圧縮を有効にする
12. ステップ 10: 最終クリーンアップ
13. 結論

Vite に移行する理由

移行プロセスに入る前に、CRA から Vite に切り替える理由について簡単に説明します。

1. 開発サーバーの起動の高速化: Vite はネイティブ ES モジュールを使用するため、開発サーバーの起動にかかる時間が大幅に短縮されます。
2. 迅速なホット モジュール交換 (HMR): コードの変更は、ほぼ即座にブラウザに反映されます。
3. ビルド パフォーマンスの向上: Vite の実稼働ビルドは多くの場合高速になり、バンドル サイズが小さくなります。
4. より柔軟な構成: Vite を使用すると、ビルド プロセスを簡単にカスタマイズできます。

前提条件

移行プロセスを開始する前に、次のことを確認してください。

• Node.js (バージョン 18 以降)
• npm または Yarn
• 移行する Create React App プロジェクト

ステップ 1: 新しい Vite プロジェクトを作成する

まず、新しい Vite プロジェクトを作成しましょう:

npm create vite@latest my-vite-app -- --template react
cd my-vite-app

このコマンドは、React テンプレートを使用して新しい Vite プロジェクトを作成します。これを移行のベースとして使用します。

ステップ 2: ソースコードを移動する

次に、既存のソース コードを CRA プロジェクトから新しい Vite プロジェクトに移動しましょう:

1. CRA プロジェクトから新しい Vite プロジェクトに src ディレクトリをコピーし、既存の src ディレクトリを置き換えます。
2. 追加のディレクトリ (public、assets など) を Vite プロジェクトのルートにコピーします。

ステップ 3: Package.json を更新する

CRA プロジェクトからのすべての依存関係を含めるために package.json ファイルを更新する必要があります:

1. CRA プロジェクトの package.json から新しい Vite プロジェクトの package.json に依存関係と devDependency をコピーします。
2. react-scripts などの CRA 固有の依存関係を削除します。
3. Vite 固有のスクリプトを追加します。

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "test": "vitest",
  "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
}

1. 依存関係をインストールします。

npm install

ステップ 4: Vite を設定する

プロジェクトのルートに vite.config.js ファイルを作成します。

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
})

この構成では、React プラグインをセットアップし、src ディレクトリのエイリアスを定義し、開発サーバーのポートを 3000 (CRA のデフォルトと一致) に設定します。

ステップ 5: インポート ステートメントを更新する

Vite は ES モジュールを使用するため、インポート ステートメントの一部を更新する必要がある場合があります:

1. JSX を使用していないファイルでは、 import React from 'react' を import * as React from 'react' に置き換えます。
2. CRA 固有のエイリアス (src/ など) を使用するインポートを更新して、新しいエイリアス (@/) または相対パスを使用します。

ステップ 6: 環境変数を処理する

Vite は CRA とは異なる方法で環境変数を処理します。

1. Vite プレフィックスを使用するように .env ファイルの名前を変更します: .env、.env.local、.env.development、.env.production。
2. コード内の環境変数の使用を更新します。
   • process.env.REACT_APP_* を import.meta.env.VITE_* に変更します
   • .env ファイルで、変数の名前を REACT_APP_* から VITE_* に変更します。

ステップ 7: テスト構成を更新する

CRA で Jest を使用している場合は、Vite との統合がより優れている Vitest に切り替える必要があります。

1. Vitest と関連パッケージをインストールします。

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

1. プロジェクトのルートに vitest.config.js ファイルを作成します。

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
})

1. Vitest 構文を使用するようにテスト ファイルを更新します (ほとんどの Jest テストは最小限の変更で動作するはずです)。

ステップ 8: プロキシサーバーを構成する

CRA プロジェクトでプロキシ設定を使用している場合は、Vite で設定する必要があります:

1. Install http-proxy:

npm install -D http-proxy

1. Update your vite.config.js:

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

const proxy = httpProxy.createProxyServer()

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        configure: (proxy, options) => {
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyReq', (proxyReq, req, res) => {
            console.log('Sending Request to the Target:', req.method, req.url)
          })
          proxy.on('proxyRes', (proxyRes, req, res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url)
          })
        },
      },
    },
  },
})

This configuration sets up a proxy for /api requests to http://localhost:5000. Adjust the target URL as needed for your backend.

Step 9: Enable Gzip Compression

To enable Gzip compression in Vite:

1. Install the vite-plugin-compression plugin:

npm install -D vite-plugin-compression

1. Update your vite.config.js:

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

export default defineConfig({
  plugins: [
    react(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
  // ... other configurations
})

This setup will generate Gzip-compressed versions of your assets during the build process.

Step 10: Final Cleanup

1. Remove any CRA-specific files and folders:

   • Delete config-overrides.js if you were using react-app-rewired
   • Remove the eject script from package.json

2. Update your README.md to reflect the new Vite setup and commands.

3. Update your CI/CD pipelines to use the new Vite commands (npm run dev, npm run build, etc.).

Conclusion

Migrating from Create React App to Vite can significantly improve your development experience and application performance. While the process involves several steps, the benefits of faster build times, quicker HMR, and more flexible configuration make it a worthwhile endeavor.

Remember to thoroughly test your application after migration to ensure everything works as expected. You may need to make additional adjustments based on your specific project structure and dependencies.

Have you successfully migrated your project from CRA to Vite? Share your experiences and any additional tips in the comments below!

Happy coding!

以上がCreate React App から Vite への移行: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。