likes
comments
collection
share

快速迁移指南：从 Create React App 迁移到 Vite

作者站长头像
站长
· 阅读数 13

除了 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 启动应用了。