概要
create-react-appで設定した環境で作ったフロントエンドをnpm create viteで設定した環境に移行した際の作業ログです。JavaScriptで書いているフロントエンドです。
環境
macOS Tahoe 26.6.2
node 26.7.0
移行した理由
React初心者です。create-react-appで作ったディレクトリーにeslintを導入しようとしたらdeprecatedが沢山出て調べたら2026年8月ではもうviteへの移行が推奨されていたためviteに移行しました。
やったこと
npm create vite@latest sleep_vite
cp -pr ./sleep_vite ./sleep_vite_bak
cd sleep_vite
git init
git remote add origin git@github.com:tyoshida431/sleep_front
git pull
git switch changeing
ブランチのスイッチでエラーが出ました。
error: The following untracked working tree files would be overwritten by checkout:
src/App.css
src/index.css
Please move or remove them before you switch branches.
Aborting
バックアップは取っているので削除しました。
cd src
rm -i App.css
rm -i index.css
cd ..
git pull
App.jsと関数を切り出したSleepUtil.jsをApp.jsxとSleepUtil.jsxにリネーム。
cd src
mv App.js App.jsx
mv SleepUtil.js SleepUtil.jsx
cd ..
後はgit pullで取得した前の環境のファイルで不要なファイルをbakディレクトリーを見ながら削除しました。
端末で開発サーバを立て動作確認。以前8080ポートでやっていてバックエンドのcors使い回すためにポート番号を指定して起動。
npm run dev -- --port 8080
process.env.REACT_APP_BASE_URLは廃止されて、import.meta.env.VITE_BASE_URLに変わりました。ソースを書き換えて.env.developmentと.env.productionを書き換えました。
他変える部分はありませんでした。
npm run build
ビルドした結果を端末で確認して、稼働させているRPiに置いて動作を確認しました。
viteはlintが最初からついているので試しました。
npm run lint
動作しました。良く分からなくて書いていたimport React from 'react';は不要とエラーが出たので削除して動作確認。ありがとうございますlint。また最初からlintついているのが有難いです。
以上でcreate-react-appで作ったReactフロントエンドをnpm create viteで作った環境に移行しました。