依托于 vite 的插件机制实现的类 umi 的按照约定配置，自动生成路由以及集成的 react 生态库相关配置的脚手架
react-router-dom@6.x 后，需要使用 <Outlet /> 来替代之前使用了 children 作为嵌套路由渲染的占位符
- 基于 react-router-dom@6.x 实现的路由系统
- 配置式路由
- 约定式路由
- 类似
vue-router@4.x的路由守卫, 详见example/src/permission.ts - 类似
vue-router@4.x的路由别名以及编程式跳转，详见example示例
- 内置基于 @vitejs/plugin-react 实现 React 的
automatic JSX runtime、react-refresh - 基于 react-i18next 实现的国际化（i18n）
- 基于 @loadable/component 实现路由懒加载、路由代码切割
- 内置 vite-plugin-windicss, 可以通过配置开启，默认关闭
- 内置基于 vite-plugin-style-import 实现的
antd等库的按需加载, 默认对antd、@ant-design/icons进行按需加载，可以通过配置进行关闭、拓展 - 内置基于 vite-plugin-mkcert 实现的使用 mkcert 为 vite https 开发服务提供证书支持，同时开启 http/2 来优化 vite http dev server 请求的并发问题
- 内置基于 @spark-build/transform-antd-theme-variable 实现对
antd的less主题色变量转换为css variable, 以达到无runtime的实时动态主题色切换 - 类似 umi 的运行时配置（未实现全部功能）
- 内置配置了
@映射到project/src的路径别名 - 跟 umi 类似的插件系统
- 检测配置文件变化，自动应用配置变更进行编译
yarn add -D @spark-build/vite-plugin-react-auto-config// vite.config.ts import { defineConfig } from 'vite'; import { reactAutoConfig } from '@spark-build/vite-plugin-react-auto-config'; export default async () => defineConfig({ // ... plugins: await reactAutoConfig(), // or [...await reactAutoConfig(), otherPlugin()] // ... });// config/index.ts 该文件需要自己创建 import { defineConfig } from '@spark-build/vite-plugin-react-auto-config'; /** * 跟 umi 一样的配置方式 * * @see https://umijs.org/zh-CN/config */ export default defineConfig({ routes: [ { path: '/', component: '@/layouts/BasicLayout', routes: [ { index: true, // 支持类似 vue-router-next 的路由别名 name: 'home', component: '@/pages/Home', routes: [ { path: 'hello', name: 'hello', component: '@/pages/Hello', }, ], }, { path: '*', component: '@/pages/NotFound', }, ], }, ], strictMode: true, react: { // @see https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme }, dynamicImport: { loading: '@/pages/Loading', delay: 60, }, locale: { default: 'zh-CN', }, antd: { // 将主题色等 less 变量转换为 css variable // toCssVariable: true, }, mkcert: true, });约定 src/app.{tsx|ts|js|jsx} 为运行时配置，app.{css|less|scss} 为全局样式文件，这两个文件创建后会自动引入
// src/app.tsx import { UseRequestProvider } from 'ahooks'; /** * 修改交给 react-dom 渲染时的根组件。 * 1、比如用于在外面包一个 Provider * 2、比如用于渲染之前做权限校验 */ export const rootContainer = (children?: React.ReactElement) => { return ( <UseRequestProvider value={{ requestMethod: (param) => axios(param), }} > {children} </UseRequestProvider> ); };// src/app.less :root { --primary-color: @primary-color; }git clone https://github.com/spark-build/vite-plugin-react-auto-config.git && cd vite-plugin-react-auto-config && yarn && yarn build && cd example && yarn && yarn dev