最近，React将其建议从使用Create-React-App（CRA）作为新项目的起点。相反，它现在鼓励开发人员到use a framework for most projects。但是，对于较小的项目，可能不需要一个成熟的框架。在这种情况下，Vite）成为一种有前途的选择。 Vite不是Next.js或Remix之类的框架，但它提供了几个功能，使其成为小型项目的绝佳选择，例如个人投资组合，like my portfolio。在这篇博客文章中，我们将带领您浏览从Create-React-App迁移到Vite的步骤。
迁移步骤
这些迁移步骤假设我们有一个带有打字稿的CRA项目。
- 删除cra
- 安装Vite依赖项
- 移动index.html
- 添加vite.config.ts
- 添加vite-env.d.t.ts
- 添加Vite脚本
- 修复tsconfig.json
- 迁移的是骑士
- 额外的
步骤1-删除CRA
第一步是从项目中卸载创建反应应用。
npm uninstall react-scripts
步骤2-安装Vite依赖关系
接下来，安装Vite所需的依赖项。
npm install vite @vitejs/plugin-react-swc vite-tsconfig-paths vite-plugin-svgr
注意：根据您的特定需求，您可以从官方的Vite插件documentation.
中选择其他插件步骤3-移动索引.html
create-react-app使用public/index.html作为默认输入点，而vite在根级别上寻找index.html。要进行过渡，请将您的index.html移至根目录并相应地更新脚本标签。
<!-- index.html -->
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
步骤4-添加vite.config.ts
使用以下内容创建一个项目根部的vite.config.ts文件：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
base: '/',
plugins: [react()]
})
步骤5-添加vite -env.d.t.ts
在SRC文件夹中创建一个带有以下内容的vite-env.d.t.t.ts文件：
/// <reference types="vite/client" />
步骤6-添加Vite脚本
用vite脚本替换package.json中的现有cra脚本。
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
}
步骤7-修复tsconfig.json
将您的tsconfig.json更新到其最终版本。
{
"compilerOptions": {
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"jsx": "react-jsx",
"types": ["vite/client", "vite-plugin-svgr/client"]
},
"include": ["src"]
}
步骤8-从开玩笑迁移到vitest
当我们转向Vite时，另一个好主意是考虑从开玩笑迁移到Vitest。这是：
8.1-安装vitest依赖性：
npm i -D jsdom vitest @vitest/coverage-v8
8.2-更新vite.config.ts以包括vitest配置：
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
base: '/',
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
css: true,
reporters: ['verbose'],
coverage: {
reporter: ['text', 'json', 'html'],
include: ['src/**/*'],
exclude: [],
}
},
})
8.3-更新软件包。带vitest脚本的json：
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"test": "vitest",
"test:coverage": "vitest run --coverage --watch=false"
},
步骤9-额外
如果您使用github操作将代码推向github页面，则需要在我们运行npm run build时vite生成 dist 文件夹时更新工作流文件。
name: GitHub Pages
on:
push:
branches:
- master
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "16"
- name: Cache dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/master'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
通过这些步骤，您现在应该成功地将您的Create-React-App项目迁移到Vite，享受其优势并为较小项目优化您的开发过程。愉快的编码！