install

npm install auto-router-plugin

Usage

const RouterWebpackPlugin = require('router-webpack-plugin')
 
module.exports = {
  entry: 'src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new RouterWebpackPlugin(
      'src/pages',{
        output: 'src/router.js'
      }
    )
  ]
}

Parms

// 路径是 相对于运行时的目录或绝对路径
new RouterWebpackPlugin(
  'src/pages', // 路由目录
  {
    output: 'src/router.js', // 路由配置输出文件
    extendRule: ['!**/*.component.*','!**/components/**/*'], //额外的globby匹配规则
    template: 'src/template.js', // 自定义模版路径
    lazy: false, // 是否启用懒加载
    depth: 0, // 输出深度
  }
)

depth

当启用depth时会自动排除文件名和output一致的文件

• 路由输出深度
  • 0 输出主路由，未被嵌套的路由
  • 1 输出被嵌套了一层的路由，即主路由的子路由
  • 以此类推
• 输出路径
  • 输出会输出到子路由向对应的文件夹下，文件名和output一致

lazy

启用懒加载后， 模版并不会为你套上 <Suspense fallback={<div>Loading...</div>}> 和处理 Error boundaries 你要自己在引用路由时主动加上 比如

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router } from "react-router-dom";

import RouterTree from "./router.js"; // 自动生成的路由
// 你同样可以懒加载它
// const RouterTree = React.lazy(() => import("./_router"));

import "./global.scss";

class App extends React.Component {
  render() {
    return (
      <Router>
        <h2> Router </h2>
        <Suspense fallback={<div>Loading...</div>}>
            <RouterTree />
        </Suspense>
      </Router>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Fix

默认插件会尝试去调用Eslint去做fix

TODO: 可选择关闭

路由映射规则

• name 根据文件/dir/name 转换 数字和特殊字符会被转换

• 与页面名字一样的文件夹下文件的为被嵌套路由 被嵌套路由不在主Switch下写出

• 排序规则

  • / 始终垫底
  • 之后根据path路径长短 越短越下面
  • 取长短的时候 每一个可选路由减一级长度
  • 如果路径长度相同 动态路由在越前面的越下面，没动态路由的在最上面
  • TODO:按字母顺序排序 防止路由随机修改

• 默认的extendRule规则为 ['!/.component.','!/components/**/*']

• 动态路由约定 $ 前缀， 如 ./pages/users/$id.js => /users/:id

• 可选路由约定 [] , 如 ./pages/users/[$id].js => /users/:id? 404路由 约定为 404.js 通过最后通配的Redict重定向

warning

当路由文件正在编辑状态时，新输入的内容可能会出错

TODO List

• [X] 自定义模版
  • [ ] 自动读取输出目录下是否有模版， 有则使用这个模版
• [X] extend 自定义排除，增加匹配
• [X] 测试
• [X] error log
• [X] 支持绝对路径
• [X] 支持懒加载
• [X] 新增路由目录下不在webpack监听下的文件也会触发路由更新
• [X] 测试win
• [X] 增加选项 是否自动输出子级路由文件到对应位置
• [X] 将驼峰风格的文件名转换为-风格的URL
• [ ] 在分析完paths和routers后各增加一个可自定义的过滤函数
• [ ] 额外包含的扩展名
• [X] example 补全中
• [ ] 通过注释增加对单个文件的配置 - possible
• [ ] 分析文件内容，判断是否是react组件 - possible
• [ ] 支持VUE～