vite-plugin-auto-routes

一个基于文件系统的自动化路由生成 Vite 插件，专为 React Router 设计。

📦 安装

npm install @wjb8191174/vite-plugin-auto-routes --save-dev

🚀 使用

1. 配置 Vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import VitePluginAutoRoutes from "@wjb/vite-plugin-auto-routes";

export default defineConfig({
  plugins: [
    react(),
    VitePluginAutoRoutes({
      pagesDir: "src/views",
      routesFile: "src/router/autoRoutes.jsx",
      lazy: true,
      suspense: true,
      fallback: "<div>加载中...</div>",
    }),
  ],
});

2. 使用生成的路由

// src/router/index.jsx
import { createBrowserRouter } from "react-router-dom";
import { routes } from "./autoRoutes";

const router = createBrowserRouter(routes);

export default router;

// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./router";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

3. 创建页面组件

// src/views/Home/Home.jsx
export default function Home() {
  return <h1>首页</h1>;
}

// src/views/Home/Home.handle.js (可选)
export default {
  crumb: "首页",
};

📋 配置选项

| 选项 | 类型 | 默认值 | 说明 | | ------------ | --------- | ----------------------------- | -------------------------- | | pagesDir | string | "src/views" | 页面组件所在目录 | | routesFile | string | "src/router/autoRoutes.jsx" | 生成的路由文件路径 | | lazy | boolean | true | 是否启用 React.lazy 懒加载 | | suspense | boolean | true | 是否使用 Suspense 包装组件 | | fallback | string | '<div>加载中...</div>' | Suspense 的 fallback 内容 |

🎯 路由规则示例

| 文件路径 | 生成的路由路径 | 组件名称 | | ------------------- | ----------------- | ------------------ | | Home/Home.jsx | /home 和 / | HomeComponent | | Home/index.jsx | / | HomeComponent | | User/Profile.jsx | /user/profile | ProfileComponent | | User/_id.jsx | /user/:id | IdComponent | | _userId/Posts.jsx | /:user-id/posts | PostsComponent | | About.jsx | /about | AboutComponent |

🔨 构建

npm run build

使用 Rollup 构建，输出 CommonJS 和 ES Module 两种格式：

• dist/index.cjs.js - CommonJS 格式
• dist/index.esm.js - ES Module 格式

📄 License

ISC

👨‍💻 作者

Created with ❤️ for better DX (Developer Experience)