vite 2 min read 1.8 KB Raw Markdown

CRA 2 Vite

CRA 프로젝트 clone 하기
브랜치 생성
react-scripts, package.json에서 제거 yarn remove react-scripts
vite 추가 yarn add vite @vitejs/plugin-react -D
node-sass 제거, sass 추가

text
yarn remove node-sass
yarn add sass -D

vite.config.ts 추가

js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~bootstrap': 'bootstrap'
    }
  },
})

package.json 에 scripts 수정

react-scripts 삭제
vite 추가

text
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",

tsconfig.json 의 es5 수정

text
  - "target": "es6",

index.html 위치 변경, %PUBLIC_URL% 삭제, script 추가

html
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>

src/index.js 를 jsx 로 확장자 변환
react, react-dom, @types/react 버전 일치

Failed to resolve import "react/jsx-dev-runtime" 에러 수정

REACT_ 환경변수 VITE_ 로 변환

.env 파일과 호출부분
process.env를 import.meta.env 로 변환

sass-migrator 적용

npx sass-migrator division **/*.scss

build용 tsc-silent 추가

yarn add tsc-silent -D
package.json 수정

text
  "scripts": {
    "dev": "vite",
    "build": "tsc-silent -p './tsconfig.json' --suppress @ && vite build"
  },

vite-plugin-babel-macros 설치

yarn add vite-plugin-babel-macros -D
vite.config.ts 추가

js
import macrosPlugin from "vite-plugin-babel-macros";
...
  plugins: [react(), macrosPlugin()],

outDir to build

vite.config.ts

json
  build: {
    outDir: "build",
  }

실행 테스트

Next → Vite