はじめに

本記事の目的と概要

Reactアプリケーションの開発において、create-react-appは非常に便利なツールですが、ビルド時間の長さなどが課題となる場合があります。そこで、より高速なビルド時間を実現できるViteへの移行を試みる本記事では、create-react-appからViteへの移行手順や注意点などを解説しています。Reactアプリケーションの開発に携わる方々にとって、本記事が役立つ情報を提供することを目的としています。

Viteとは

Viteは、Evan Youが開発した高速で軽量なフロントエンドビルドツールです。Viteは、Webブラウザでのモジュールベースの開発を可能にするESM（ECMAScriptモジュール）の標準化に基づいています。Viteは、開発時に高速でリアルタイムに反応し、プロダクションビルドにはRollupを使用して高速で最適化されたバンドルを生成します。Viteは、React、Vue.js、Svelteなどの主要なフレームワークで使用できます。

Viteに移行するメリット

Viteでは、プロジェクトのビルドとサーバーの起動が分離されています。ビルドは事前に行われ、起動時にはビルドしたファイルをサーバーが即座に配信するため、サーバーの起動が非常に高速です。また、ホットリロードの機能もあるため、変更内容をリアルタイムに反映できます。このような仕組みにより、Viteを使用することで開発の効率が大幅に向上することができます。

create-react-appからViteへの移行方法

環境

WSL2で開発しているアプリなのでWSL2上で行います。

node -v
v16.14.2
yarn -v
1.22.18

Viteのインストール

viteとreactのプラグインを導入します。

yarn add --dev vite @vitejs/plugin-react

vite.config.tsの作成

プロジェクトのルートディレクトリ(package.jsonと同じところ)にvite.config.tsを作成します。

以下のようにします

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

export default defineConfig({
  server: {
    host: true,
    open: true,
  },
  resolve: {
    alias: [{ find: "@", replacement: "/src" }],
  },
  build: {
    outDir: "build",
  },
  plugins: [react()],
});

package.jsonの設定変更

以下のように修正します。

- "start": "react-scripts start",
- "build": "react-scripts build"
+ "dev": "vite",
+ "start": "vite",
+ "build": "vite build",

index.htmlの移動

create-react-appで作成した場合public配下にindex.htmlが存在すると思いますが、それをプロジェクトのルートに移動させます。

その後以下のように%PUBLIC_URL%で指定されている箇所を修正を行います。

- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="apple-touch-icon" href="/logo192.png" />
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="manifest" href="/manifest.json" />

最後にbodyタグの中にindex.tsxの記述を追加します。

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
</body

モジュールのインポートパスの修正

起動するとこんな感じで怒られました。

Error: The following dependencies are imported but could not be resolved:

そのためApp.tsxを以下のように修正

- import { ExceljsDownload } from "feature/exceljs";
+ import { ExceljsDownload } from "@/feature/exceljs";

起動

yarn dev

こんな感じに無事に起動できればOK

yarn run v1.22.18
$ vite

  VITE v4.2.1  ready in 652 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://自分のIP:5173/
  ➜  press h to show help

まとめ

Viteは高速で軽量なビルドツールであり、サーバーの起動も瞬時に行えるため、開発効率が向上します。
create-react-appからの移行も、Viteが提供するCLIコマンドを使うことで、非常に簡単に実現できます。
ただし、Viteはまだ新しいツールであるため、全てのプラグインやライブラリに対応しているわけではありません。移行時には注意が必要です。
今後ますます注目が高まることが予想されるViteについて、ぜひ手軽に使ってみてください！

超簡単！create-react-appからViteへ移行する方法