unplugin-convention-routes

• 🔥 基于文件系统的约定式路由解决方案。
• 🔥 基于unplugin对vite-plugin-pages进行了移植，能同时支持vite、webpack、rsbuild、farm等构建框架，并同时支持react、vue、solid三大框架。
• ⚠️ 尚在开发中，可能有的框架无法正常使用，个人测试了vue+vite、vue+rsbuild、react+vite、react+rsbuild可用。

已知问题

• 新增路由无法热更，需要手动重启项目（可能是vite对js文件请求进行了缓存？）
• 配置文件可能有ts错误提示（比较影响体验，需要优先解决）
• 测试用例无法通过（影响GitHub观感，影响renovate automerge）

---

📦 安装 & 使用

pnpm i unplugin-convention-routes

Vite

// vite.config.ts
import Routes from 'unplugin-convention-routes/vite'

export default defineConfig({
  plugins: [
    Routes({ /* options */ }),
  ],
})

Rsbuild

// rsbuild.config.ts
import Routes from 'unplugin-convention-routes/rspack'

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        Pages({ /* options */ }),
      ],
    },
  },
})

React

// env.d.ts
/// <reference types="unplugin-convention-routes/client-react.d.ts" />

import routes from '~unplugin-convention-routes/react'
import { StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import {
  BrowserRouter,
  useRoutes,
} from 'react-router-dom'

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      {useRoutes(routes)}
    </Suspense>
  )
}

const app = createRoot(document.getElementById('root')!)

app.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

Vue

// env.d.ts
/// <reference types="unplugin-convention-routes/client-vue.d.ts" />

import routes from '~unplugin-convention-routes/vue'
import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
  routes,
})

🔨 示例项目

• https://github.com/liujiayii/unplugin-convention-routes/tree/main/examples

友情链接

• unplugin
• vite-plugin-pages