create-react-app製のポートフォリオサイトをViteに乗り換えた
乗り換えの背景
ポートフォリオはcreate-react-appしたものをずっと使っていたが、最近Viteなるビルドツールが人気のようなので自分のポートフォリオでその力を確かめてみることにした。
ちなみにポートフォリオはReact + TypeScriptという構成になっている。
導入に際してやったこと
公式ドキュメントを読みながら進めた。日本語対応しており、内容も充実していたのでスラスラ進めることができた。
パッケージのインストール
npm i -D vite @vitejs/plugin-react
@vitejs/plugin-reactはReact用のプラグイン。
設定ファイルの準備
vite.config.jsを作成
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
base: '/',
plugins: [react()],
build: {
outDir: './build'
},
})index.htmlの微修正
%PUBLIC_URL%が不要らしいので削除。
<!-- 例 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
↓
<link rel="icon" href="/favicon.ico" />bodyタグにJSを読み込むためのコードを追加。
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script> <!-- これを追加 -->
</body>npmスクリプトを用意
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}いざビルド
npm run devでlocalhost:3000にアクセスすると、今までのポートフォリオサイトが表示されていた。
以上の設定で簡単に乗り換えが完了できた。
動作に問題はなく、起動もかなり速くなっていたのでそのままデプロイした。
今までありがとう
npm rm react-scripts
