route-auto-generate

WebpackPlugin

特性

• 根据页面目录结构自动生成路由文件
• 支持基础路由和动态路由
• 支持 vue-router 和 react-router
• 可配置路由前缀
• 可配置重定向路由
• 可进行路由覆盖
• 可配置是否开启路由懒加载
• 可自定义 WebpackChunkName
• 路由生成模板支持自定义
• 自动监听目录结构变化并更新路由文件

使用

这里以 vue-cli 生成的项目为例

1npm i -D route-auto-generate

在 webpack 配置文件中引入，如果是 vue-cli 生成的项目请在 vue.config.js 引入

1const path = require("path");
2const { RouteAutoGenerateWebpackPlugin } = require("route-auto-generate");
3
4module.exports = {
5  configureWebpack: {
6    resolve: {
7      alias: {
8        "@": path.resolve(__dirname, "src/"),
9      },
10    },
11    plugins: [
12      new RouteAutoGenerateWebpackPlugin({
13        routerLibraryName: "vue-router",
14        routerPath: path.resolve(__dirname, "./src/router.js"),
15        pagesPath: path.resolve(__dirname, "./src/views"),
16        pagesAlias: "@/views/",
17      }),
18    ],
19  },
20};

选项

初始化插件时可以进行以下配置：

名称	类型	默认值	描述
routerLibraryName	vue-router | react-router	vue-router	路由库名称
routerPath	string	appRoot + "/src/router.js"	路由文件路径 必须是绝对路径
pagesPath	string	appRoot + "/src/views"	页面文件夹路径 必须是绝对路径
pagesAlias	string	''	项目路径别名 比如@/views/代表src/views/ 如果不实用别名，路由的path将使用绝对路径
routerPrefix	string	/	路由公共前缀
template	object	vueTemplate | reactTemplate	路由生成模板
watch	boolean	true	是否监听文件目录变化 打包时请关闭
asyncRoute	boolean	true	是否开启路由懒加载
coverRoutes	Array	RouteConfig[]	需要覆盖的路由
redirectPath	string	''	当路由无法匹配时进行重定向的路径
chunkNamePrefix	string	pages	webpack chunk name 前缀

命名格式

用-符分割参数，$符表示参数可选

页面目录结构：

1pages/
2--| tag-id/
3-----| index.vue
4--| category-id$/
5-----| index.vue
6--| home.vue
7--| index.vue

生成的路由文件

1routes: [
2  {
3    path: "/cateory/:id?",
4    name: "cateory",
5    component: () => import(/* webpackChunkName: "pages-cateory" */ "@/views/cateory-id$/index.vue")
6  },
7  {
8    path: "/home",
9    name: "home",
10    component: () => import(/* webpackChunkName: "pages-home" */ "@/views/home.vue")
11  },
12  {
13    path: "/",
14    name: "index",
15    component: () => import(/* webpackChunkName: "pages-index" */ "@/views/index.vue")
16  },
17  {
18    path: "/tag/:id",
19    name: "tag",
20    component: () => import(/* webpackChunkName: "pages-tag" */ "@/views/tag-id/index.vue")
21  }
22]

路由生成模板

reactTemplate

1import { RouteConfig } from '../types';
2
3function routeTpl(config: RouteConfig) {
4  const { name, path, component, chunkNamePrefix, asyncRoute } = config;
5  let tpl;
6  if (name === undefined) {
7    // prettier-ignore
8    tpl = `<Redirect to="${path}" />`;
9  } else if (asyncRoute) {
10    // prettier-ignore
11    tpl = `
12    <Route
13      exact
14      path="${path}"
15      component={Loadable(() => import(${chunkNamePrefix &&`/* webpackChunkName: "${chunkNamePrefix}-${name}" */`} "${component}"))}
16    />`;
17  } else {
18    // prettier-ignore
19    tpl = `
20    <Route exact path="${path}" component={${name}} />`;
21  }
22  return tpl;
23}
24
25function fileTpl(routesCode: string, syncRoutesImportCode?: string) {
26  // prettier-ignore
27  return `
28    import React, { Component } from 'react';
29    import { Switch, Route, Redirect } from 'react-router-dom';
30    import Loadable from '@loadable/component'
31    ${syncRoutesImportCode}
32
33    export default class RouteView extends Component {
34      render() {
35        return (
36          <Switch>
37            ${routesCode}
38          </Switch>
39        )
40      }
41    };`;
42}
43
44export default {
45  routeTpl,
46  fileTpl
47};

vueTemplate

1import { RouteConfig } from '../types';
2
3function routeTpl(config: RouteConfig) {
4  const { name, path, component, chunkNamePrefix, asyncRoute } = config;
5  let tpl;
6  if (name === undefined) {
7    // prettier-ignore
8    tpl = `{
9      path:"*",
10      redirect:"${path}"
11    }`;
12  } else if (asyncRoute) {
13    // prettier-ignore
14    tpl = `{
15      path: "${path}",
16      name: "${name}",
17      component: () => import(${chunkNamePrefix &&`/* webpackChunkName: "${chunkNamePrefix}-${name}" */`} "${component}")
18    }`;
19  } else {
20    // prettier-ignore
21    tpl = `{
22      path: "${path}",
23      name: "${name}",
24      component: ${name}
25    }`;
26  }
27  return tpl;
28}
29
30function fileTpl(routesCode: string, syncRoutesImportCode?: string) {
31  // prettier-ignore
32  return `
33    import Vue from "vue";
34    import Router from "vue-router";
35    ${syncRoutesImportCode}
36
37    Vue.use(Router);
38
39    export default new Router({
40      routes: [${routesCode}]
41    });`;
42}
43
44export default {
45  routeTpl,
46  fileTpl
47};

自定义

你可以根据自己的实际需求编写自己的 template 文件，然后初始化插件时配置 template 即可

路由覆盖

某些情况下自动生成的路由顺序你可能不满意，需要调整，那么你可以使用coverRoutes这个配置项来自定义你需要覆盖的路由，也就是把他们放到最前面，其中name,path,component都是必填项，用来定义路由名称，路由路径和路由文件所在位置

1new RouteAutoGenerateWebpackPlugin({
2  routerPath: path.resolve(__dirname, "./src/router.js"),
3  pagesPath: path.resolve(__dirname, "./src/views"),
4  pagesAlias: "@/views/",
5  coverRoutes: [
6    {
7      name: 'index',
8      path: '/',
9      component: '@/views/about/index.vue'
10    }
11  ],
12})

注意事项

1. 在 React 项目中使用时@loadable/component和react-router-dom需要自行安装
2. 在 Vue 项目中vue-router需要自行安装
3. watch 默认打开，如果需要打包部署生产环境时请手动关闭，不然不会自动退出

TODO

• 嵌套路由