vite-plugin-react-auto-config

依托于 vite 的插件机制实现的类 umi 的按照约定配置，自动生成路由以及集成的 react 生态库相关配置的脚手架

破坏性更新

[email protected] 后，需要使用 <Outlet /> 来替代之前使用了 children 作为嵌套路由渲染的占位符

Support

• 基于 [email protected] 实现的路由系统
  • 配置式路由
  • 约定式路由
  • 类似 [email protected] 的路由守卫, 详见 example/src/permission.ts
  • 类似 [email protected] 的路由别名以及编程式跳转，详见 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 类似的插件系统
• 检测配置文件变化，自动应用配置变更进行编译

Installation

yarn add -D @spark-build/vite-plugin-react-auto-config

Usage

引入插件

// 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