레거시 React Typescript 프로젝트에서 webpack 및 babel을 Vite로 대체하는 방법

JavaScript의 세계가 얼마나 빨리 움직이는지 정말 놀랍습니다.

빌드 도구에 관한 한 Grunt이 처음 출시되었을 때 얼마나 인기가 있었는지 기억합니다. 그 다음에는 Gulp 및 Babel이 함께 등장하여 새로운 기능을 추가하고 이전 브라우저에서 작동하도록 했습니다.

그런 다음 한동안 있을 것 같은 Webpack이 있었습니다. Parcel 및 Snowpack과 같은 것이 등장한 후에도 사람들은 여전히 ​​Webpack을 추천했습니다. 내 말은, 그것은 여전히 ​​create-react-app의 중추입니다. 안텐,Vite이 발매되었습니다.

Vite는 빠르고 정말 빠릅니다. 구성이 거의 필요하지 않으며 설정이 쉽습니다. 그것은 esbuild 위에 있습니다.

나는 미래에 Vite를 대체할 무언가가 있을 것이라는 데 의심의 여지가 없지만 Vite의 구성 파일이 약 10줄일 수 있는 반면 Webpack의 경우 약 100줄이었을 것이라는 단순한 사실 때문에 나는 그것을 고수하는 것이 좋은 선택이라고 생각합니다. 앞으로 몇 년 동안 그리고 이전 Webpack 프로젝트를 업그레이드할 무언가로.

또한 Vite를 사용하는 경우 Babel이 필요하지 않으므로 수많은 종속성과 보안 취약성 메시지를 제거할 수 있습니다.

주요 단계

1 - 먼저 어떤 이유로든 다시 돌아가야 할 경우를 대비하여 이전 프로젝트에 대한 새 브랜치를 생성해 보겠습니다. 분기를 참조할 필요가 없다면 몇 달 후에 분기를 삭제할 수 있습니다.

# oh-my-zsh git aliases
gcb old-webpack-babel
gpsup

참고: 위의 명령은 기본적으로 oh-my-zsh 과 함께 제공되는 별칭이 지정된 github 명령입니다. 여기에서 full list을 볼 수 있습니다.

2 - 이제 메인 브랜치로 돌아가서 모든 babel 및 webpack 패키지를 제거하고 하나의 큰 명령에 대비하십시오.

npm uninstall webpack webpack-merge webpack-dev-server
 webpack-cli ... you get the idea

3 - webpack 및 babel 관련 파일, webpack.common.js, webpack.dev.js 등을 모두 삭제합니다.

4 - Vite 및 Vite React 플러그인 설치

npm i vite @vitejs/plugin-react
# then
npm i @types/node -D

5 - 다음 코드를 사용하여 프로젝트의 루트에 vite.config.ts 파일을 만듭니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()]
});

6 - 다음 코드를 사용하여 package.json 파일을 업데이트합니다.

"dev": "vite",
"build": "vite build",

이제 npm run dev 를 실행합니다. 모든 것이 잘 진행되면 프로젝트가 정상일 것입니다.

선택적 단계

프로젝트에 따라 아래 단계가 필요하지 않을 수 있습니다.

별칭

나와 같은 경우 다음과 같이 코드에 임의의 Webpack 별칭이 있습니다.

import "@/assets/styles/global";

다음과 같이 Vite 구성 파일에 추가할 수 있습니다.

// At top of file
import path from "node:path";

// ...
  resolve:{
      alias:{
        '@' : path.resolve(__dirname,)
      },
    },
  plugins: [react()]

CSS 모듈

CSS 모듈을 사용하고 있다면 유감입니다. 모든 파일의 확장자를 .css 대신 .module.css로 변경해야 합니다.

그런 다음 css 파일에 있는 작성 속성의 이름도 변경합니다.

/* from this */
composes: c-white from "../helpers.css";
/* to this */
composes: c-white from "../helpers.module.css";

또한 css 파일을 가져오는 JS/TS 파일도 있습니다.

// from this
import buttonCss from '@assets/styles/Buttons.css';
// to this
import buttonCss from '@assets/styles/Buttons.module.css';

이것은 내가 아는 정말 고통스러운 일이지만 좀 더 의미가 있습니다. 그리고, 모두 찾기와 바꾸기는 당신의 친구입니다💪

초대 환경 변수

비밀을 유지하거나 기반 정보를 삽입하기 위해 환경 변수를 설정할 수 있습니다.

1 - .env 파일을 만듭니다.
2 - 다음과 같이 변수 앞에 VITE_ 접두사를 추가합니다.

VITE_TEST_VAR = "something secret"

3 - 다음과 같이 코드에 로드합니다.

const secretVar = import.meta.env.VITE_TEST_VAR;

4 - Typescript를 사용하는 경우 프로젝트 루트에 env.d.ts 파일을 만들어야 합니다.

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

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

npm-check-updates 설치

레거시 프로젝트의 한 부분을 업그레이드하고 있으므로 다른 모든 종속성을 업데이트하지 않는 이유는 무엇입니까? 가장 좋은 방법은 npm-check-updates 패키지를 사용하는 것입니다.

semver 수준으로 업데이트를 설치하는 것이 좋습니다. 따라서 먼저 패치 업데이트, 마이너 업데이트, 메이저 업데이트를 차례로 설치합니다. 프로젝트 테스트는 여전히 업데이트 사이에 작동합니다.

다음과 같은 명령을 실행하면 쉽게 수행할 수 있습니다.

ncu -t patch -u

package.json 파일의 패치 버전만 업데이트한 다음 다음을 실행합니다.

npm i

실제로 업데이트를 설치합니다.


그게 전부입니다.

저는 Vite 전문가는 아니지만 질문이 있는 경우 아래 섹션에 자유롭게 적어 주시면 최선을 다해 답변해 드리겠습니다.