webpack to vite (vite로 마이그레이션)

개요

저번 포스팅에서 CRA는 죽었다(라는 표현보단 deprecated)라는 포스팅을 하였는데

이번에 최근에 각광받고 있고, 빠른 vite로 CRA(create-react-app)을 마이그레이션(migration) 해볼까한다

사실 CRA로 게시되있는 프로젝트를 바꾸는 방법은 두가지인데

Case1. Vite로 새롭게 만들기

사실 가장 원시적인 방법이다.

일단 가장 어려운점은 프로젝트 사이즈가 크지 않은 거라면 상관없지만 프로젝트가 크다면, 관련된 라이브러리 및 연관된 디펜던시등의 설정이 어려움이 있을가능성이 높다

그렇기 때문에 이부분은 PASS

Case2. Webpack to Vite

이번 포스팅을 하게 된 계기인데 가장 안정적인 방법이지 않을까 싶다 기존프로젝트를 유지한채로 vite만 갈아 끼우는 방법 무엇보다 안정적으로 변경이 가능하다는 점이 매력적이였다.

그래서 이번 포스팅은 이 케이스를 바탕으로 작성

Webpack to vite (migration step)

⚠️ https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

위 글을 참조하여 번역한 글이니 참조 부탁드립니다.

 

webpack에서 vite로 옮기는 방법을 step by step으로 설명할예정이다 물론 이 포스팅은 CRA(Create-React-App)기준으로 작성하고 있으나 기존 Webpack 프로젝트도 별다른건 없다고 생각한다.

1. 디펜던시(dependencies) 설치

일단 기본적인 디펜던시는 두가지인데

• https://github.com/vitejs/vite
• https://github.com/vitejs/vite-plugin-react

두가지만 설치해도 충분히 프로젝트하는데는 이상이 없으나, 우리는 프로젝트에 도움이되는 플러그인도 함께 설치해볼 예정이다.

• https://github.com/pd4d10/vite-plugin-svgr : 프로젝트에서 SVG파일을 사용할수 있도록 도와준다.
• https://github.com/aleclarson/vite-tsconfig-paths**:** 절대경로 설정

config 파일 설정

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// <https://vitejs.dev/config/>
export default defineConfig({
	define: {
			// <https://github.com/vitejs/vite/issues/1973#issuecomment-787571499>
     'process.env': {},
   },
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
});

vite의경우 env파일을다르게 관리하는데 아래 문서참조

https://ko.vitejs.dev/guide/env-and-mode.html

그래서 process 에러가 뜨는 것을 방지하기 위해 define하는 부분 추가

index.html

• 기존에 public 폴더에 존재했던 index.html 파일을 root 폴더로 옮기는 작업을 한다

index.html move

public/index.html -> /index.html 

• 그후에 public url로 지원되는 부분을 모두 변경해준다

// 변경 전
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

// 변경 후
<link rel="icon" href="/favicon.ico" />

• 그후 id가 root인 div아래에 script 태그를 두어 entry point를 만든다

<div id="root"></div>
<!-- Add entry point 👇 -->
<script type="module" src="/src/index.tsx"></script>

tsconfig.json 파일 업데이트

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

여기서 vite관련된 tsconfig 레퍼런스 참조가가능하다

vite-env.d.ts 생성

• Typescript를 사용시 아래 파일 생성

// ---- vite-env.d.ts ---- //

/// <reference types="vite/client" />

react-scripts 제거

• 이제 CRA와 작별 해봅시다 👋

npm uninstall react-scripts

• 그리고 react-app-env.d.ts 파일을 제거

package.json 파일 업데이트

• 이제 react-script에서 vite로 업데이트

"scripts": {
  "start": "vite",
  "build": "tsc && vite build",
  "serve": "vite preview"
},

이제 실행해봅시다

• 이제 다끝났으니 실행해봅시다!

npm start 
// or
yarn start

마무리

상당히 재미있었다.

무엇보다 vite의 편리함에 엄청 놀랐다 기존에 webpack설정의 경우 여러가지 때문에 곤욕을 치룬적이 많았었는데 단순한 설정에 빠르기까지해서 많은 개발자에게 각광받고 있는게 아닌지 다시금 깨닫게 되었다.

어쨋든 아직 처음이지만 Vite 만세~