개발아빠

Webpack 에서 Vite로 이사가기

육아개발아빠 2022. 12. 6. 23:27
반응형

최근에 Vite에 대한 장점들을 보고, 한번 사용해보기로 해서 기존에 시작한 Webpack으로 사용한 프로젝트를 Vite로 옮겨보기로 했다.

그냥 Vite로 최초로 프로젝트를 생성하면 아래와 같이 생성하면 끝이다.

npm create vite@latest '프로젝트 이름' --options

// create-vite 섹션에서는 더욱 다양한 템플릿들에 대해 다루고 있습니다
vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts

우리가 원하는것은 React + TS 
> npm create vite@latest vite-react-ts --react-ts
> cd vite-react-ts

# yarn
yarn install
# npm
npm install

아래에서 더 많은 정보를 볼 수 있다. 입맛대로 골라 써봐도 될듯한.

https://vitejs-kr.github.io/guide/#community-templates

 

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

 

사실 원래 이걸 말하려는건 아니고,

기존에 Webpack으로 사용했던걸 Vite로 이사가는 상황인데 이사 순서는 아래와 같았다.

 

1. package.json 수정

1. devDependencies 에 추가 
"@vitejs/plugin-react": "^2.2.0"
"vite": "^3.2.0"

2. type에 module 추가 
"type": "module"

3. script 변경 및 추가 
"start": "vite --port 3000",
"build": "tsc && vite build"
"preview": "vite preview"
 

2. index.html 수정

1. index.html위치를 /(root)로 이동시킨다.
2. %PUBLIC_URL% 사용했던 부분을 제거한다.
3. 아래를 body에 추가한다.
<script type="module" src='/src/index.tsx'></script>
3. react-app.env.d.ts를 변경
1. 해당 파일을 vite-env.d.ts 로 변경한다.
2. 아래와 같이 변경한다.
/// <reference types="vite/client" />
 
4. tsconfig.json을 변경
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5. tsconfig.node.json을 생성

{
	"compilerOptions": {
	"composite": true,
		"module": "ESNext",
		"moduleResolution": "Node",
		"allowSyntheticDefaultImports": true
},
	"include": ["vite.config.ts"]
}

6. 환경변수 사용방식을 변경한다. 

1. 기존에 REACT_APP_~~를 VITE_로 변경한다.
REACT_APP_SITE_NAME → VITE_APP_SITE_NAME

2. 환경변수를 가져오는 방식을 변경한다.
import.meta.env.환경변수명

7. (Option) js파일을 cjs파일로 변경한다.

ex) postcss.config.js -> postcss.config.cjs

 

그리고 기존에 Webpack 기준으로 생성했을때 패키지들을 제거해준다.

react-scripts
webpack

 

빌드가 되면 기존에는 build 폴더가 생성되었는데, Vite에서는 dist로 생성되기때문에 이 부분도 참고해야한다.

이렇게 작업을 하게 되면 아마도... Vite를 사용이 가능해진다.

그래서 빌드를 하게되면 정말 눈깜짝할 사이에 프로젝트가 구동됨을 알 수 있다. 

빌드속도가 절반이상 빠른걸 확인이 가능하다.

 

하지만 단점으로는 어떠한 라이브러리나 특히 스토리북을 사용할 경우에는 기존에 Webpack 기준으로 설정들이 대 부분 되어있기때문에

따로 또 Vite를 위한 버전을 찾아야하는 일들이 있었다는 점이 조금 우려되는 부분이었다.

 

그래서 특정 라이브러리를 추가하고 뭔가 동작이 안되면 Vite를 의심을 하게 되었다는 (결국 죄가 없었지만) 

 

반응형