react-scriptsとViteを共存させる

最近流行りらしいViteというツールを試してみます。(※ヴィートと読みます）

Reactのビルドと開発サーバーの起動に使用する便利なreact-scriptsですが、１つだけ問題があります。

起動が遅い！

ソースコードが増えるとどんどん遅くなるようで、30秒〜1分くらいかかったりします。
デザインやメッセージを少し修正して表示を確認するのに30秒待つのはちょっと…と思いますよね？

そこで、Reactでも使用できるというViteというフロントエンドツールの出番です。
開発サーバーの 起動が速い！　とにかく速い！ というのがウリのようです。

ただ、いきなり新しいツールに切り替えるといろいろと問題がありそうなので、しばらくはViteとreact-scriptsを共存してどちらでも使えるようにします。

なお、Viteは型のチェックは行わないのでIDEの設定等で検出できるようにする必要があります。

コードサンプル

実際に修正したコードはgithubにあります。

github: react-scripts-to-vite-sample

Viteへの移行

react-scriptsの環境作成

ここでは、既存のプロジェクトがcreate-react-appで構築しreact-scriptsを使っているものとして、Viteに移行してみます。

npmとpnpmを使用するので先にインストールしてください。
pnpmがインストールされてない場合は以下のコマンドでインストールします。

sudo npm install -g pnpm

まずは create-react-app で空の環境（react-scripts-to-vite-sampleプロジェクト）を作成します。

pnpx create-react-app react-scripts-to-vite-sample --template typescript

cd react-scripts-to-vite-sample

pnpm install

pnpm start で開発サーバーが起動します。まだ空のプロジェクトだと数秒で起動しますね。

Viteの環境作成

次に、設定ファイルを拝借するためにViteの空のプロジェクト（vite_sample）を作成します。

pnpm create vite vite_sample --template react-ts

vite_sampleプロジェクトから以下のファイルを同階層のrs2vite_sampleプロジェクトにコピーします。

vite.config.ts
tsconfig.node.json
src¥vite-env.d.ts

設定変更

Viteに対応するため、react-scripts-to-vite-sampleプロジェクトの設定ファイルを修正します。

tsconfig.json

targetがes5になっている場合はes6に変更します。

//    "target": "es5",
    "target": "es6",

viteの設定ファイルを参照するよう以下を追加します。

  "references": [{ "path": "./tsconfig.node.json" }]

package.json

Viteを起動するスクリプトを追加します。

  "scripts": {
    "dev": "vite --port 3000",

index.html

public¥index.html をプロジェクト直下にコピーします。

※Viteは index.html をプロジェクト直下に置く設定になっており、修正も必要なのでindex.htmlに関しては二重管理が必要そうです。
しかしながら、修正する頻度は低いと思うのでそれほど問題にはならないでしょう。

index.htmlを修正します。

“%PUBLIC_URL%/” を “/” に置換します。

“%PUBLIC_URL%を消すのを忘れると”URI malformed”と謎のエラーが表示されます。

URI malformed
at decodeURI ()
at viteTransformMiddleware

スクリプト読み込みのため1行追加します。
※srcのパスは環境に合わせて修正します。

    <script type="module" src="/src/index.tsx"></script>

パッケージを追加します。

pnpm add -D vite
pnpm add -D @vitejs/plugin-react

設定が終わったら pnpm dev でViteで開発サーバーを起動します。
空のプロジェクトとはいえ、この時点でreact-scriptsより速いですね。

pnpm startで従来通りreact-scriptsでの起動も可能です。

既存のプロジェクトで試したところ、30秒かかっていた開発サーバーの起動が0.3秒で完了するようになりました。
型チェックが省略されているのがどの程度影響があるかしばらく使ってみる必要がありますが、ちょっとした修正は手早く取り掛かることができそうです。

注意事項

空のプロジェクトであれば移行はそれほど難しくないですが、実際のプロジェクトを移行すると色々と問題がありました。

開発サーバー起動時にブラウザが開かない

vite.config.tsに設定を追加します。

  server: {
    open: true,
  },

process.envが使用できない

Reactでは”REACT_APP_”から始まる環境変数をコード中で使用できますが、Viteでは環境変数の取得方法が変わっており import.meta.env から取得することになっています。
また、環境変数の先頭は”VITE_”である必要があります。

しかし、既存のコードに手を入れるのも怖いのでパッケージを入れて解決します。
※環境変数の設定のためにcross-envも追加しておくと便利です。

pnpm add vite-plugin-env-compatible
pnpm add -D cross-env

vite.config.tsにimportを追加します。

import envCompatible from 'vite-plugin-env-compatible'

vite.config.tsのpluginsに１行追加します。

    envCompatible({ prefix: "REACT_APP_",  mountedPath: "process.env" }),

環境変数を追加する場合は src/vite-env.d.ts にも設定が必要です。

なお、この設定では環境変数の名前の先頭がREACT_APP_である必要があります。

パスの解決でエラーになる

importの解決がうまくいかない場合、tsconfigに設定を追加している可能性があります。
その場合は以下のパッケージを追加します。

pnpm add vite-tsconfig-paths

vite.config.tsにimportを追加します。

import tsconfigPaths from 'vite-tsconfig-paths'

vite.config.tsのpluginsに１行追加します。

tsconfigPaths()