构建工具迁移

核心配置等价迁移

Craco 本质上是 Webpack Hack，所以迁移需要把原来的 Webpack 配置全部“翻译”为 Vite 配置

路径别名

// craco.config.js
webpack: {
  alias: { '@': 'src' }
}

// vite.config.ts
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

环境变量处理

• CRA 使用 REACT_APP_，通过process.env读取
• vite 使用VITE_,通过import.meta.env读取

babel 配置

• webpack 依赖 Babel 完成 JSX/TSX 转译、ES6+ 语法降级、React 语法转换（如 React.createElement）
• vite 使用 react 官方插件@vitejs/plugin-react，无缝兼容 React 生态的语法、特性和开发体验

svg 处理

项目中需要将 SVG 文件转换为 React 组件

• craco 中使用的是@svgr/webpack loader 实现的
• vite 中引入了vite-plugin-react-svg 插件放置在了 plugins 数组中

条件编译插件

从js-conditional-compiler迁移到了vite-conditional-compiler

迁移问题

CSS 预处理器兼容差异

某些 Less 变量在 Vite 下编译失败，原因是 CRA 隐式注入了 Less loader ,options。在迁移时需要开启 javascriptEnabled 选型

css: {
  preprocessorOptions: {
    less: {
      javascriptEnabled: true;
    }
  }
}

第三方库兼容问题

vite 的依赖预构建是基于 esbuild,不支持 commonjs,而有一些第三方库是 cjs 的，导致依赖预构建过程中(optimizeDeps)报错

{
  optimizeDeps: {
    include:[],
    exclude:[cjs]
  }
}