sx-route-config-grab-webpack-plugin

路由配置抓取工具

路由配置最常用的方式，是一个path 对应 一个组件，我们可以通过脚本生成；文件路径是唯一的，甚至可以使用文件路径作为路由的path；

路由抓取方式

1. 文件中编写 export const PAGE_ROUTE = '/user';常量，常量值作为路由的path，当前文件中默认导出的组件，作为路由的component，这种方式可以地址携带参数，比如我们可以定义这样的path：/user/:id。
2. 基于文件目录结构，生成路由的path，比如 src/pages/user/UserList.jsx，可以对应成 path: /user/UserList, component: path/to/UserList，这种方式不用定义路由path，但是路由跟目录结构有耦合关系，无法定义/user/:id这样的路由，但是可以通过queryString方式解决。
3. 特殊的路由方式，可以在routes.js文件中定义

设计成webpack插件

插件名：RouteConfigGrabWebpackPlugin，路由配置抓取 路由抓取工具如果能设计成webpack，使用起来非常方便，提高通用性

安装

$ yarn add sx-route-config-grab-webpack-plugin -D

插件参数

参数	说明	类型	默认值
mode	dir、variable ，路由抓取方式，dir：基于目录；variable：基于文件中变量export const PAGE_ROUTE = '/user';	string	dir
hyphen	路由中的驼峰命名转换为连字符命名，UserList -> user-list	boolean	false
codeSplitting	是否使用代码分割	boolean	true
paths	需要抓取的目录，一般是/path/to/pages/**/*.jsx	string or [string]	-
pagePath	页面文件所在目录，用于简化从文件路径中截取路由path字符串，比如pathPath = /path/to/src/pages，filePath = /path/to/src/pages/user/UserList.jsx，最终得到的路由path：/user/UserList	string	-
ignored	需要忽略的文件	string or [string]	-
output	生成的路由文件输出文件	string	-
watch	是否启用监听模式，一般开发模式下是true	boolen	-
template	路由文件生成模版，ejs文件，如果生成的路由文件不符合期望，可以自己通过模版生成文件内容	string	-
displayLog	是否显示log信息	boolean	false

默认template模版

codeSplitting = true:

// 此文件为生成文件，不要直接编辑
export default [<% for(let i = 0; i< result.length; i++){ %>
    {
        path: '<%= result[i].routePath%>',
        getComponent: () => import('<%= result[i].path %>'),
    },<% } %>
];

codeSplitting = false:

// 此文件为生成文件，不要直接编辑
<% for(let i = 0; i< result.length; i++){ %>import <%= `Component` + i %> from '<%= result[i].path%>';
<%}%>
export default [<% for(let i = 0; i< result.length; i++){ %>
    {
        path: '<%= result[i].routePath%>',
        component: <%= `Component` + i %>,
    },<% } %>
];

template模版文件能得到的数据

参数	说明	类型	默认值
routePath	路由使用的path	string	-
path	文件绝对路径	string	-
fileName	不带扩展名的文件名	string	-
baseName	含有扩展名的文件名	string	-
content	文件内容 （mode === variable 时才有）	string	-

webpack插件用法

结合webpack进行使用

const path = require('path');

const RouteConfigGrabWebpackPlugin = require('sx-route-config-grab-webpack-plugin');

new RouteConfigGrabWebpackPlugin({
    mode: 'dir',
    // mode: 'variable',
    codeSplitting: false,
    paths: [
        path.resolve(__dirname, './src/pages/**/*.jsx'),
        path.resolve(__dirname, './src/pages2/**/*.jsx'),
        path.resolve(__dirname, './src/pages3/**/*.jsx'),
    ],
    pagePath: path.resolve(__dirname, './src/pages'),
    ignored: [],
    output: path.resolve(__dirname, './src/page-routes.js'),
    watch: true,
    // template,
});

非webpack插件方式使用

自定义脚本，而非webpack环境，可以通过如下方式使用：

const path = require('path');

const RouteConfigGrabWebpackPlugin = require('sx-route-config-grab-webpack-plugin');

const rcgwp = new RouteConfigGrabWebpackPlugin({
    mode: 'dir',
    // mode: 'variable',
    codeSplitting: false,
    paths: [
        path.resolve(__dirname, './src/pages/**/*.jsx'),
        path.resolve(__dirname, './src/pages2/**/*.jsx'),
        path.resolve(__dirname, './src/pages3/**/*.jsx'),
    ],
    pagePath: path.resolve(__dirname, './src/pages'),
    ignored: [],
    output: path.resolve(__dirname, './src/page-routes.js'),
    watch: true,
    // template,
});

rcgwp.routeConfigGrab();