[React] CRA에서 Vite로 마이그레이션하기

김서현·2023년 6월 10일

cra프로젝트를 vite로 마이그레션 할 때의 프로세스는 다음과 같습니다.

1. package.json에 의존성 모듈과 스크립트 변경
2. vite 구성 추가(vite.config.ts, src/vite-env.d.ts)
3. tsconfig.json 변경
4. public/index.html 변경 및 이동

마이그레이션

1. 의존성 모듈 & 스크립트 변경

yarn remove react-scripts
yarn add -D @vitejs/plugin-react-swc vite

"scripts": {
	"start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
}

2. vite 구성 추가

vite 사용을 위한 파일을 추가하거나 기존의 파일을 변경합니다.

vite.config.ts 추가

프로젝트 폴더의 루트에 vite.config.ts파일을 추가합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  build: {
    outDir: "build",
  },
  plugins: [react()],
});

src/react-app.env.d.ts 변경

CRA실행시 src 아래 생기는 react-app.env.d.ts파일을 vite에 맞추어 변경합니다.
파일명을 src/react-app.env.d.ts에서 vite-env.d.ts로 변경합니다.

/// <reference types="vite/client" />

3. tsconfig.json 변경

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": ["vite/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": [
      "@types"
    ],
  },
  "include": [
    "src"
  ]
}

4. index.html 파일 변경 및 이동

public폴더 아래의 index.html파일을 루트로 이동합니다.

변경전 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

변경후 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>