CRA 2 Vite

  1. CRA 프로젝트 clone 하기
  2. 브랜치 생성
  3. react-scripts, package.json에서 제거 yarn remove react-scripts
  4. vite 추가 yarn add vite @vitejs/plugin-react -D
  5. node-sass 제거, sass 추가
yarn remove node-sass
yarn add sass -D
  1. vite.config.ts 추가
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~bootstrap': 'bootstrap'
    }
  },
})
  1. package.json 에 scripts 수정
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
  1. tsconfig.json 의 es5 수정
  * "target": "es6",
  1. index.html 위치 변경, %PUBLIC_URL% 삭제, script 추가
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  1. src/index.js 를 jsx 로 확장자 변환
  2. react, react-dom, @types/react 버전 일치
  1. REACT_ 환경변수 VITE_ 로 변환
  1. sass-migrator 적용
  1. build용 tsc-silent 추가
  "scripts": {
    "dev": "vite",
    "build": "tsc-silent -p './tsconfig.json' --suppress @ && vite build"
  },
  1. vite-plugin-babel-macros 설치
import macrosPlugin from "vite-plugin-babel-macros";
...
  plugins: [react(), macrosPlugin()],
  1. outDir to build
  build: {
    outDir: "build",
  }
  1. 실행 테스트
What Else?
inflearn react api server