Webpack 에서 Vite로 이사가기

최근에 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

 

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

기존에 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를 의심을 하게 되었다는 (결국 죄가 없었지만)