👌

create-react-app で作成したアプリを Vite に移行する

2021/12/12に公開2件

React

Vite

cra

tech

create-react-app で作成したアプリを vite で起動できるようにするまでの手順メモ。

検証環境

create-reactp-app@4.0.3
vite@2.7.1

create-react-app は TypeScript テンプレートで作成したものを想定しています。
パッケージマネージャには yarn を使用しているため、 npm を使用している場合は適宜読み替えてください。

手順

Vite をインストール

Vite と React 用のプラグインをインストールします。
また、 react-scripts は不要になるためついでにアンインストールしておきます。

$ yarn add -D vite @vitejs/plugin-react
$ yarn remove react-scripts

Vite の設定ファイルを作成

以下の内容で vite.config.ts を作成します。

vite.config.ts

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

export default defineConfig({
  server: {
    open: true, // 自動でブラウザを開く
  },
  build: {
    outDir: 'build', // ビルドの出力先ディレクトリ
  },
  plugins: [react()],
});

`index.html` を更新

index.html を public/ ディレクトリからプロジェクトのルートディレクトリに移動します。

$ mv public/index.html .

index.html 内の %PUBLIC_URL% を全て削除します。

index.html

 <!-- 例 -->
-<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+<link rel="icon" href="/favicon.ico" />

/src/index.tsx を読み込む <script> タグを追記します。

index.html

 <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>

環境変数

環境変数名は REACT_APP_* にしていたものを VITE_* に変更します。

.env

-REACT_APP_HOGE=hoge
-REACT_APP_FUGA=fuga
+VITE_HOGE=hoge
+VITE_FUGA=fuga

アプリ内で環境変数を読み込むときは process.env ではなく import.meta.env を使用するようにします。

-process.env.VITE_HOGE
-process.env.VITE_FUGA
+import.meta.env.VITE_HOGE
+import.meta.env.VITE_FUGA

TypeScript を使用している場合、以下のような内容で src/env.d.ts を作成することで環境変数の型を定義できます。

src/env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_HOGE: string
  readonly VITE_FUGA: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

`package.json` の `scripts` を更新

vite を使用するように書き換えます。

package.json

   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },

移行完了

以下のコマンドでアプリを起動することができます。

$ yarn start

参考

Discussion

しげる

素敵な記事をありがとうございます。vite 動かしてみたくて、参考になりました。
npx create-reac-app から動かしてみたのですが、javascript のファイル名を変更しないと動かないようでした 🙇‍♂️

  (use "git restore --staged <file>..." to unstage)
        new file:   .env
        renamed:    public/index.html -> index.html
        modified:   package.json
        renamed:    src/App.js -> src/App.jsx
        renamed:    src/index.js -> src/index.tsx
        new file:   vite.config.ts
        new file:   yarn.lock

niccari

記事の作成ありがとうございます！

tsファイルからリソースファイル(jpg, png, svgなど)をimportするとき、src/react-app-env.d.tsを以下の通り変更する必要がありましたので共有いたします。

src/react-app-env.d.ts

-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />

このファイルでは、リソースファイルを読み込むための型定義などへの参照がされています。react-scriptsをdevDependenciesから除去すると、react-scriptsでの型定義がなくなるためCannot find module 'リソースファイル名' or its corresponding type declarations.となります。

viteに置き換えた後は'vite/client'が使えるので、上記の様に書き換えると引き続きリソースファイルをtsファイル上でimportできるようになります。