{"id":27555902,"url":"https://github.com/spark-build/vite-plugin-react-auto-config","last_synced_at":"2025-08-21T01:17:17.102Z","repository":{"id":57161840,"uuid":"347353829","full_name":"spark-build/vite-plugin-react-auto-config","owner":"spark-build","description":"依托于 vite 的插件机制实现的类 umi 的按照约定配置，自动生成路由以及集成的 react 生态库相关配置的脚手架","archived":false,"fork":false,"pushed_at":"2022-01-04T08:39:55.000Z","size":246,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-18T06:16:16.398Z","etag":null,"topics":["ant-design","react","react-i18next","react-router","react-router-dom","umi","umi-vite","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://vite-plugin-react-auto-config.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spark-build.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-13T11:38:24.000Z","updated_at":"2023-05-12T17:03:04.000Z","dependencies_parsed_at":"2022-09-10T06:40:35.412Z","dependency_job_id":null,"html_url":"https://github.com/spark-build/vite-plugin-react-auto-config","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-build%2Fvite-plugin-react-auto-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-build%2Fvite-plugin-react-auto-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-build%2Fvite-plugin-react-auto-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spark-build%2Fvite-plugin-react-auto-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spark-build","download_url":"https://codeload.github.com/spark-build/vite-plugin-react-auto-config/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249754158,"owners_count":21320736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","react","react-i18next","react-router","react-router-dom","umi","umi-vite","vite","vite-plugin"],"created_at":"2025-04-19T17:55:43.507Z","updated_at":"2025-04-19T17:55:44.804Z","avatar_url":"https://github.com/spark-build.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-react-auto-config\n\n依托于 [vite](https://github.com/vitejs/vite) 的插件机制实现的类 [umi](https://github.com/umijs/umi) 的按照约定配置，自动生成路由以及集成的 react 生态库相关配置的脚手架\n\n## 破坏性更新\n`react-router-dom@6.x` 后，需要使用 `\u003cOutlet /\u003e` 来替代之前使用了 `children` 作为嵌套路由渲染的占位符\n\n## Support\n\n- [x] 基于 [react-router-dom@6.x](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh#readme) 实现的路由系统\n  - [x] 配置式路由\n  - [ ] 约定式路由\n  - [x] 类似 `vue-router@4.x` 的路由守卫, 详见 `example/src/permission.ts`\n  - [x] 类似 `vue-router@4.x` 的路由别名以及编程式跳转，详见 `example` 示例\n- [x] 内置基于 [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) 实现 React 的 `automatic JSX runtime`、`react-refresh`\n- [x] 基于 [react-i18next](https://github.com/i18next/react-i18next) 实现的国际化（i18n）\n- [x] 基于 [@loadable/component](https://loadable-components.com/docs/getting-started/) 实现路由懒加载、路由代码切割\n- [x] 内置 [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss), 可以通过配置开启，默认关闭\n- [x] 内置基于 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现的 `antd` 等库的按需加载, 默认对 `antd`、`@ant-design/icons` 进行按需加载，可以通过配置进行关闭、拓展\n- [x] 内置基于 [vite-plugin-mkcert](https://github.com/liuweiGL/vite-plugin-mkcert) 实现的使用 mkcert 为 vite https 开发服务提供证书支持，同时开启 http/2 来优化 vite http dev server 请求的并发问题\n- [x] 内置基于 [@spark-build/transform-antd-theme-variable](https://github.com/spark-build/transform-antd-theme-variable) 实现对 `antd` 的 `less` 主题色变量转换为 `css variable`, 以达到无 `runtime` 的实时动态主题色切换\n- [x] 类似 umi 的运行时配置（未实现全部功能）\n- [x] 内置配置了 `@` 映射到 `project/src` 的路径别名\n- [x] 跟 umi 类似的插件系统\n- [x] 检测配置文件变化，自动应用配置变更进行编译\n\n## Installation\n\n```bash\nyarn add -D @spark-build/vite-plugin-react-auto-config\n```\n\n## Usage\n\n#### 引入插件\n\n```typescript\n// vite.config.ts\n\nimport { defineConfig } from 'vite';\nimport { reactAutoConfig } from '@spark-build/vite-plugin-react-auto-config';\n\nexport default async () =\u003e\n  defineConfig({\n    // ...\n    plugins: await reactAutoConfig(), // or [...await reactAutoConfig(), otherPlugin()]\n    // ...\n  });\n```\n\n#### 配置文件\n\n```typescript\n// config/index.ts  该文件需要自己创建\nimport { defineConfig } from '@spark-build/vite-plugin-react-auto-config';\n\n/**\n * 跟 umi 一样的配置方式\n *\n * @see https://umijs.org/zh-CN/config\n */\nexport default defineConfig({\n  routes: [\n    {\n      path: '/',\n      component: '@/layouts/BasicLayout',\n      routes: [\n        {\n          index: true,\n          // 支持类似 vue-router-next 的路由别名\n          name: 'home',\n          component: '@/pages/Home',\n          routes: [\n            {\n              path: 'hello',\n              name: 'hello',\n              component: '@/pages/Hello',\n            },\n          ],\n        },\n        {\n          path: '*',\n          component: '@/pages/NotFound',\n        },\n      ],\n    },\n  ],\n  strictMode: true,\n  react: {\n    // @see https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme\n  },\n  dynamicImport: {\n    loading: '@/pages/Loading',\n    delay: 60,\n  },\n  locale: {\n    default: 'zh-CN',\n  },\n  antd: {\n    // 将主题色等 less 变量转换为 css variable\n    // toCssVariable: true,\n  },\n  mkcert: true,\n});\n```\n\n#### 运行时配置\n\n约定 `src/app.{tsx|ts|js|jsx}` 为运行时配置，`app.{css|less|scss}` 为全局样式文件，这两个文件创建后会自动引入\n\n```typescript\n// src/app.tsx\n\nimport { UseRequestProvider } from 'ahooks';\n\n/**\n * 修改交给 react-dom 渲染时的根组件。\n * 1、比如用于在外面包一个 Provider\n * 2、比如用于渲染之前做权限校验\n */\nexport const rootContainer = (children?: React.ReactElement) =\u003e {\n  return (\n    \u003cUseRequestProvider\n      value={{\n        requestMethod: (param) =\u003e axios(param),\n      }}\n    \u003e\n      {children}\n    \u003c/UseRequestProvider\u003e\n  );\n};\n```\n\n```less\n// src/app.less\n\n:root {\n  --primary-color: @primary-color;\n}\n```\n\n#### 示例\n\n```bash\ngit clone https://github.com/spark-build/vite-plugin-react-auto-config.git \u0026\u0026 cd vite-plugin-react-auto-config \u0026\u0026 yarn \u0026\u0026 yarn build \u0026\u0026 cd example \u0026\u0026 yarn \u0026\u0026 yarn dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspark-build%2Fvite-plugin-react-auto-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspark-build%2Fvite-plugin-react-auto-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspark-build%2Fvite-plugin-react-auto-config/lists"}