집 >웹 프론트엔드 >JS 튜토리얼 >Create React App에서 Vite로 마이그레이션: 개발자 가이드

Create React App에서 Vite로 마이그레이션: 개발자 가이드

DDD원래의: 2024-12-30 21:55:10963검색

Migrating from Create React App to Vite: A Developer

Create React App에서 Vite로 마이그레이션: 개발자 가이드

안녕하세요, 동료 개발자 여러분! ?

최근에 저는 프로덕션 React 애플리케이션을 CRA(Create React App)에서 Vite로 마이그레이션하는 도전에 나섰습니다. 결과는? 빌드 시간이 3분에서 단 20초로 단축되었습니다! ?

이 가이드에서는 디버깅 시간을 절약할 수 있는 JavaScript 파일에서 JSX를 처리하는 방법에 대한 중요한 팁을 포함하여 전체 마이그레이션 프로세스를 안내합니다.

? Vite로 전환하는 이유는 무엇입니까?

기술적인 세부정보를 자세히 알아보기 전에 이 전환을 원하는 이유를 살펴보겠습니다. 우리 팀은 몇 가지 인상적인 개선을 보였습니다.

Metric	Before (CRA)	After (Vite)
Dev Server Startup	30s	2s
Hot Module Replacement	2-3s	<100ms
Production Build	3 min	20s
Bundle Size	100%	85%

또한 다음과 같은 멋진 기능도 제공됩니다.

⚡️ 빛처럼 빠른 HMR
? 개발 중 번들링 없음
? 더욱 간편해진 구성
? 더 나은 오류 메시지
? 기본 TypeScript 지원

? 마이그레이션 단계

1. 프로젝트 준비

먼저 새 브랜치를 만듭니다.

git checkout -b feature/migrate-to-vite

2. 종속성 업데이트

CRA 제거 및 Vite 추가:

# Remove CRA dependencies
npm uninstall react-scripts @craco/craco

# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react

3. VITE 구성

프로젝트 루트에 vite.config.js를 생성하세요.

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

export default defineConfig({
  plugins: [
    react({
      // ? Key configuration for .js files with JSX
      include: "**/*.{jsx,js}",
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
  },
});

중요: include: "**/*.{jsx,js}" 구성이 중요합니다! 이것이 없으면 Vite는 .jsx 파일의 JSX만 처리합니다.

4. 환경변수

Vite는 환경 변수를 다르게 처리합니다.

.env 파일 유지
변수 이름을 REACT_APP_에서 VITE_로 바꿉니다.
참조 업데이트:

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

5. 패키지 스크립트 업데이트

package.json의 스크립트 교체:

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src --ext .js,.jsx"
  }
}

6. index.html 이동

public/index.html을 루트로 이동
업데이트:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your App Name</title>
  </head>
  <body>
    <div>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

2. 절대수입

vite.config.js 업데이트:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

3. SVG 지원

vite-plugin-svgr 설치 및 구성:

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  // ...
});

✅ 마이그레이션 체크리스트

실행 전:

[ ] 개발서버 시작
[ ] 핫 모듈 교체 작업
[ ] 환경 변수에 접근 가능
[ ] 빌드 프로세스 성공
[ ] 가져오기 경로가 올바르게 확인됩니다
[ ] SVG 및 자산 로드
[ ] CSS 모듈 작동

? 결론

CRA에서 Vite로 마이그레이션하는 것이 어려워 보일 수도 있지만 성능 향상으로 인해 그만한 가치가 있습니다. 기억하세요:

.js 파일에 대한 JSX 처리를 조기에 구성
환경 변수 업데이트
가져오기 경로 확인
철저히 테스트

React 앱을 Vite로 마이그레이션하셨나요? 어떤 어려움에 직면했습니까? 댓글로 여러분의 경험을 공유해주세요!

이 정보가 도움이 되었나요? 더 많은 React 및 JavaScript 팁을 보려면 저를 팔로우하세요!

댓글과 질문에 적극적으로 답변해드리겠습니다. 마이그레이션 과정에 대한 설명이 필요하면 알려주세요!

위 내용은 Create React App에서 Vite로 마이그레이션: 개발자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript json css html if switch for while include Error public JS this

성명：

이전 기사：npm의 Fastly CLI: 이제 JavaScript를 손끝에서 사용하세요다음 기사：npm의 Fastly CLI: 이제 JavaScript를 손끝에서 사용하세요