快速迁移指南:从 Create React App 迁移到 Vite
除了 Next.js,Vite 是创建现代 React SPA的自然继承者。
距离Vite推出也有一段时间了,所以就把原来公司的react项目从create-react-app升级到vite了,提高项目构建速率。接下来就看看如何进行迁移吧:
1、安装Vite和所有相关的React库(这里使用Vite的React插件)作为开发依赖:
npm install vite @vitejs/plugin-react --save-dev
2、卸载 create-react-app 的依赖:
npm uninstall react-scripts
3、修改 package.json 文件,使用以下新的脚本:
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
4、将所有使用 JSX 的文件的扩展名从“.js” 改为 “.jsx”,因为 Vite 明确要求文件名要有正确的扩展名。如果用了 TypeScript,也按照相同的方法将“.ts”改为“.tsx”。
mv src/App.js src/App.jsx
mv src/index.js src/index.jsx
如果没有重命名所有与React/JSX相关的文件,即使用尖括号的所有文件,可能会收到以下类似的错误消息:
- The JSX syntax extension is not currently enabled
- The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
5、在根目录中创建 vite.config.js 文件:
touch vite.config.js
这里我们在构建时使用与create-react-app相同的输出目录。此外还使用了 Vite 的 React 插件:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
};
});
6、在 index.html 文件中找到所有的 %PUBLIC_URL% 然后删除。
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />=
7、最后,在移动后的 index.html 文件中引入 src/index.js :
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
至此,如果你只是用 create-react-app 创建了项目,没有做其余配置的话,那么项目就迁移完成了。运行 npm start 就可以用 Vite 启动应用了。
转载自:https://juejin.cn/post/7221804330013311033