React 개발자로서 우리는 항상 개발 경험과 애플리케이션 성능을 향상시킬 수 있는 방법을 찾고 있습니다. 고려할 수 있는 중요한 업그레이드 중 하나는 CRA(Create React App)에서 Vite로 마이그레이션하는 것입니다. Vite는 더 빠른 빌드 시간, 더 빠른 HMR(핫 모듈 교체) 및 더욱 간소화된 개발 환경을 제공합니다. 이 종합 가이드에서는 프록시 서버 처리 및 Gzip 압축 활성화를 포함하여 CRA 프로젝트를 Vite로 마이그레이션하는 과정을 안내합니다.
마이그레이션 프로세스를 시작하기 전에 CRA에서 Vite로 전환하려는 이유에 대해 간략하게 논의해 보겠습니다.
마이그레이션 프로세스를 시작하기 전에 다음 사항을 확인하세요.
먼저 새로운 Vite 프로젝트를 만들어 보겠습니다.
npm create vite@latest my-vite-app -- --template react cd my-vite-app
이 명령은 React 템플릿을 사용하여 새로운 Vite 프로젝트를 생성합니다. 이를 마이그레이션의 기반으로 활용하겠습니다.
이제 기존 소스 코드를 CRA 프로젝트에서 새 Vite 프로젝트로 이동해 보겠습니다.
CRA 프로젝트의 모든 종속성을 포함하도록 package.json 파일을 업데이트해야 합니다.
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
}
npm install
프로젝트 루트에 vite.config.js 파일을 만듭니다.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src',
},
},
server: {
port: 3000,
},
})
이 구성은 React 플러그인을 설정하고, src 디렉터리에 대한 별칭을 정의하며, 개발 서버 포트를 3000(CRA 기본값과 일치)으로 설정합니다.
Vite는 ES 모듈을 사용하므로 일부 import 문을 업데이트해야 할 수도 있습니다.
Vite는 CRA와 다르게 환경 변수를 처리합니다.
CRA와 함께 Jest를 사용하는 경우 Vite와 더 잘 통합되는 Vitest로 전환해야 합니다.
npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.js',
},
})
CRA 프로젝트에서 프록시 구성을 사용한 경우 Vite에서 설정해야 합니다.
npm install -D http-proxy
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import httpProxy from 'http-proxy'
const proxy = httpProxy.createProxyServer()
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
configure: (proxy, options) => {
proxy.on('error', (err, req, res) => {
console.log('proxy error', err)
})
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('Sending Request to the Target:', req.method, req.url)
})
proxy.on('proxyRes', (proxyRes, req, res) => {
console.log('Received Response from the Target:', proxyRes.statusCode, req.url)
})
},
},
},
},
})
This configuration sets up a proxy for /api requests to http://localhost:5000. Adjust the target URL as needed for your backend.
To enable Gzip compression in Vite:
npm install -D vite-plugin-compression
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
react(),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
],
// ... other configurations
})
This setup will generate Gzip-compressed versions of your assets during the build process.
Remove any CRA-specific files and folders:
Update your README.md to reflect the new Vite setup and commands.
Update your CI/CD pipelines to use the new Vite commands (npm run dev, npm run build, etc.).
Migrating from Create React App to Vite can significantly improve your development experience and application performance. While the process involves several steps, the benefits of faster build times, quicker HMR, and more flexible configuration make it a worthwhile endeavor.
Remember to thoroughly test your application after migration to ensure everything works as expected. You may need to make additional adjustments based on your specific project structure and dependencies.
Have you successfully migrated your project from CRA to Vite? Share your experiences and any additional tips in the comments below!
Happy coding!
위 내용은 Create React App에서 Vite로 마이그레이션: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
