Zenn
🐥

Create React AppからViteへの移行

2024/10/19に公開
React
Vite
Create React App
tech

概要

昔開発したSource Code Comment TranslatorというSPAはCreate React App(CRA)をベースに開発しました。
しかし、CRAの開発は停止しており、依存ライブラリも脆弱性がある状況で、GitHubからアラートが来ていました。
そこで、CRAからViteというフロントエンドビルドツールに移行しました。
本記事では移行に対して実施した内容を紹介します。

実施内容

ここではざっくりと説明します。
詳細は2024年10月18日から19日にかけてのGitHubのコミット履歴を参照ください。

移行先としてViteを選んだ理由は、ときどきCRAからの移行先として紹介されるWEBサイトを見かけたからです。
また、Reactの公式サイトにて、フレームワークなしで React を使う場合のときのツールとして少しだけ紹介されていました。

また、移行時には、こちらの記事とViteの公式サイトを主に参考しました。

Viteのインストール

以下のコマンドでViteをインストールしました。
エラーで入らなかったので、forceオプションをつけています。

npm install -D --force vite

index.htmlの修正

主に以下を実施しました。

  • index.htmlのディレクトリを移動

    CRAではpublic以下にエントリーポイントであるindex.htmlを配置します。
    Viteではプロジェクトルートに配置しますので、単に移動します。

  • index.htmlにscriptタグを追記

    index.html内に<script type="module" src="/src/index.tsx"></script>を追記しました。

詳細はこちらを参照ください。

このタイミングでnpx viteを実行して開発サーバーを起動し、Vite上で問題なくアプリが動作するか確認しました。

CRAのeject

CRAを削除する前にejectを行います。
CRAで作成した際のREADMEに書いてあるとおりnpm run ejectを実行します。
実行すると、いろいろなファイルが作成され、package.jsonが変更されます。

よく使うコマンドをVite用に修正

package.jsonのscriptsをVite用に変更し、よく使うコマンドを変更・追加します。
こちらによると、Vite は build 時に型検査を行わないので build 前に tsc --noEmit を追加して別途型検査を行うようにしています。

package.json抜粋
  "scripts": {
    ...
    "start": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview",
    "test": "jest"
  },

Viteの公式サイトのコマンドラインインターフェイスを参考にしました。

不要なパッケージの削除

変更前後で以下のコマンドが成功するか確認し、アプリが壊れていないか確認しながら進めました。

npx eslint --fix src/  # リント
npm test               # テスト
npm run build          # プロダクション用のビルド
npm run preview        # プロダクション用ビルドをローカルでプレビュー
npm start              # 開発サーバーを起動

npm uninstall <パッケージ名>のコマンドで削除します。
依存関係のエラーが出た場合は削除する順番を変えたりしています。
今回は以下の順番で削除しました。

  1. @types/node
  2. webpack, tailwindcss
  3. webpack関連パッケージ
  4. bfj, browserslist, camelcase, css-loader, dotenv, dotenv-expand, file-loader, fs-extra, identity-obj-proxy, mini-css-extract-plugin
  5. postcss関連パッケージ
  6. prompts, resolve, resolve-url-loader, sass-loader, semver, source-map-loader, style-loader, web-vitals

不要な設定やファイルの削除

package.jsonからbrowserslistとの項目を削除しました。

また、ejectで作成されたけど不要なファイルとして以下のファイルを削除しました。

  • config/env.js
  • config/getHttpsConfig.js
  • config/modules.js
  • config/paths.js
  • config/webpack/persistentCache/createEnvironmentHash.js
  • config/webpack.config.js
  • config/webpackDevServer.config.js

不要かどうかは以下のコマンドが成功するかどうかで判断しています。

npx eslint --fix src/  # リント
npm test               # テスト
npm run build          # プロダクション用のビルド
npm run preview        # プロダクション用ビルドをローカルでプレビュー
npm start              # 開発サーバーを起動

パッケージのメジャーバージョン更新

Vite移行と直接関係ないですが、いい機会だったので利用しているパッケージのバージョンアップしました。

npm outdatedで更新があるパッケージを表示し、以下の順番で更新しました。

GitHub Pages関連の修正

GitHub Pagesにデプロイしているので、それに関する変更をしました。

  • package.jsonの修正

    CRAはbuildディレクトリにプロダクション用のビルドファイルを出力しますが、Viteはdistディレクトリに出力するので、それに合わせて修正します。

    package.json
    "scripts": {
   ...
-  "deploy": "gh-pages -d build",
+  "deploy": "gh-pages -d dist",
   ...
},

  • Viteの設定にbaseを追加

    デプロイ先がルートディレクトリ(http://ytgw.github.io/)でなく、サブディレクトリ以下なので(http://ytgw.github.io/CodeCommentTranslator/)を追加します。

    vite.config.mjs
    import { defineConfig } from "vite";

export default defineConfig({
    base: "/CodeCommentTranslator/"
})

まとめ

Create React App(CRA)をベースに開発したSPAをViteに移行したときに実施した内容を備忘録を兼ねて紹介しました。
未来の自分や皆さんの参考になれば幸いです。

参考サイト

GitHubで編集を提案

Discussion