CRA 2 Vite
- CRA 프로젝트 clone 하기
- 브랜치 생성
- react-scripts, package.json에서 제거
yarn remove react-scripts
- vite 추가
yarn add vite @vitejs/plugin-react -D
- node-sass 제거, sass 추가
yarn remove node-sass
yarn add sass -D
- 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'
}
},
})
- package.json 에 scripts 수정
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
- tsconfig.json 의 es5 수정
* "target": "es6",
- index.html 위치 변경,
%PUBLIC_URL%
삭제, script
추가
<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 수정
"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 추가
import macrosPlugin from "vite-plugin-babel-macros";
...
plugins: [react(), macrosPlugin()],
- outDir to build
build: {
outDir: "build",
}
- 실행 테스트