<code>create-react-app</code> で作成したアプリを <code>vite</code> で起動できるようにするまでの手順メモ。
<h1 id="%E6%A4%9C%E8%A8%BC%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E6%A4%9C%E8%A8%BC%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 検証環境</h1>
<ul>
<li>create-reactp-app@4.0.3</li>
<li>vite@2.7.1</li>
</ul>
<code>create-react-app</code> は TypeScript テンプレートで作成したものを想定しています。 
パッケージマネージャには <code>yarn</code> を使用しているため、 <code>npm</code> を使用している場合は適宜読み替えてください。
<h1 id="%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h1>
<h2 id="vite-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#vite-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Vite をインストール</h2>
Vite と React 用のプラグインをインストールします。 
また、 <code>react-scripts</code> は不要になるためついでにアンインストールしておきます。
<div class="code-block-container"><pre><code>$ yarn add -D vite @vitejs/plugin-react
$ yarn remove react-scripts
</code></pre></div><h2 id="vite-%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#vite-%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Vite の設定ファイルを作成</h2>
以下の内容で <code>vite.config.ts</code> を作成します。
<div class="code-block-container">
<div class="code-block-filename-container">vite.config.ts</div>
<pre class="language-ts"><code class="language-ts">import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 server: {
 open: true, // 自動でブラウザを開く
 },
 build: {
 outDir: 'build', // ビルドの出力先ディレクトリ
 },
 plugins: [react()],
});
</code></pre>
</div><h2 id="index.html-%E3%82%92%E6%9B%B4%E6%96%B0">
<a class="header-anchor-link" href="#index.html-%E3%82%92%E6%9B%B4%E6%96%B0" aria-hidden="true"></a> <code>index.html</code> を更新</h2>
<code>index.html</code> を <code>public/</code> ディレクトリからプロジェクトのルートディレクトリに移動します。
<div class="code-block-container"><pre><code>$ mv public/index.html .
</code></pre></div><code>index.html</code> 内の <code>%PUBLIC_URL%</code> を全て削除します。
<div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="language-diff-html"><code class="language-diff-html"> &lt;!-- 例 --&gt;
-&lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" /&gt;
+&lt;link rel="icon" href="/favicon.ico" /&gt;
</code></pre>
</div><code>/src/index.tsx</code> を読み込む <code>&lt;script&gt;</code> タグを追記します。
<div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="language-diff-html"><code class="language-diff-html"> &lt;body&gt;
 &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
+ &lt;script type="module" src="/src/index.tsx"&gt;&lt;/script&gt;
 &lt;/body&gt;
</code></pre>
</div><h2 id="%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0" aria-hidden="true"></a> 環境変数</h2>
環境変数名は <code>REACT_APP_*</code> にしていたものを <code>VITE_*</code> に変更します。
<div class="code-block-container">
<div class="code-block-filename-container">.env</div>
<pre class="diff-highlight "><code class="diff-highlight ">-REACT_APP_HOGE=hoge
-REACT_APP_FUGA=fuga
+VITE_HOGE=hoge
+VITE_FUGA=fuga
</code></pre>
</div>アプリ内で環境変数を読み込むときは <code>process.env</code> ではなく <code>import.meta.env</code> を使用するようにします。
<div class="code-block-container"><pre class="language-diff-tsx"><code class="language-diff-tsx">-process.env.VITE_HOGE
-process.env.VITE_FUGA
+import.meta.env.VITE_HOGE
+import.meta.env.VITE_FUGA
</code></pre></div>TypeScript を使用している場合、以下のような内容で <code>src/env.d.ts</code> を作成することで環境変数の型を定義できます。
<div class="code-block-container">
<div class="code-block-filename-container">src/env.d.ts</div>
<pre class="language-ts"><code class="language-ts">/// &lt;reference types="vite/client" /&gt;

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

interface ImportMeta {
 readonly env: ImportMetaEnv
}
</code></pre>
</div><h2 id="package.json-%E3%81%AE-scripts-%E3%82%92%E6%9B%B4%E6%96%B0">
<a class="header-anchor-link" href="#package.json-%E3%81%AE-scripts-%E3%82%92%E6%9B%B4%E6%96%B0" aria-hidden="true"></a> <code>package.json</code> の <code>scripts</code> を更新</h2>
<code>vite</code> を使用するように書き換えます。
<div class="code-block-container">
<div class="code-block-filename-container">package.json</div>
<pre class="language-diff-json"><code class="language-diff-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"
 },
</code></pre>
</div><h2 id="%E7%A7%BB%E8%A1%8C%E5%AE%8C%E4%BA%86">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E5%AE%8C%E4%BA%86" aria-hidden="true"></a> 移行完了</h2>
以下のコマンドでアプリを起動することができます。
<div class="code-block-container"><pre><code>$ yarn start
</code></pre></div><h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<iframe id="zenn-embedded__6ba9361af6fe8" src="https://embed.zenn.studio/card#zenn-embedded__6ba9361af6fe8" data-content="https%3A%2F%2Fvitejs.dev%2Fguide%2Fenv-and-mode.html" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://vitejs.dev/guide/env-and-mode.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vitejs.dev/guide/env-and-mode.html</a> 
<iframe id="zenn-embedded__85deacf55d847" src="https://embed.zenn.studio/card#zenn-embedded__85deacf55d847" data-content="https%3A%2F%2Fwww.darraghoriordan.com%2F2021%2F05%2F16%2Fmigrating-from-create-react-app-to-vite%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite/</a>

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

しげる

niccari

素敵な記事をありがとうございます。vite 動かしてみたくて、参考になりました。 
npx create-reac-app から動かしてみたのですが、javascript のファイル名を変更しないと動かないようでした 🙇‍♂️
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"> (use "git restore --staged &lt;file&gt;..." to unstage)
 new file: .env
 renamed: public/index.html -&gt; index.html
 modified: package.json
 renamed: src/App.js -&gt; src/App.jsx
 renamed: src/index.js -&gt; src/index.tsx
 new file: vite.config.ts
 new file: yarn.lock
</code></pre></div>

記事の作成ありがとうございます！
tsファイルからリソースファイル(jpg, png, svgなど)をimportするとき、src/react-app-env.d.tsを以下の通り変更する必要がありましたので共有いたします。
<div class="code-block-container">
<div class="code-block-filename-container">src/react-app-env.d.ts</div>
<pre class="diff-highlight "><code class="diff-highlight ">-/// &lt;reference types="react-scripts" /&gt;
+/// &lt;reference types="vite/client" /&gt;
</code></pre>
</div>このファイルでは、リソースファイルを読み込むための型定義などへの参照がされています。react-scriptsをdevDependenciesから除去すると、react-scriptsでの型定義がなくなるため<code>Cannot find module 'リソースファイル名' or its corresponding type declarations.</code>となります。
viteに置き換えた後は'vite/client'が使えるので、上記の様に書き換えると引き続きリソースファイルをtsファイル上でimportできるようになります。

Discussion