@sagaroute/cmd

介绍

@sagaroute/cmd是一个基于@sagaroute/react开发的进行快速生成约定式路由列表的命令行工具

特点

• 🌴 广泛性: 生成的约定式路由列表遵循ES6 Module格式，适用于任何开发环境
• 🎉 可扩展: 内部具有完整的执行周期，可通过配置项进行扩展
• 📲 实用性: 采用近似于umi的约定式路由规则，更贴近实际开发场景

起步

1. 安装

npm install -g  @sagaroute/cmd
# OR
yarn global add @sagaroute/cmd

2. 在路由模板文件中用注释做标记注入

路由模板文件是指要被注入路由列表的文件，我们需要通过注释来指明路由模板文件中哪个位置被注入路由列表和依赖。

例如存在路由模板文件，其内容如下：

import React from 'react';

const routes = [];
const router = createBrowserRouter(routes);
export default router;

我们需要对上述文件用注释进行标记，标记后如下所示：

import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
/* sagaroute-inject:imports */

/* sagaroute-inject:routes */
const routes = [];
const router = createBrowserRouter(routes);
export default router;

其中/* sagaroute-inject:imports */用于标记依赖注入的位置，/* sagaroute-inject:routes */用于标记路由列表注入的位置。关于这些注释的含义和路由模板文件的更多说明可看此处

3. 生成约定式路由列表

打开terminal终端，输入sagaroute命令运行后，会生成路由列表且将其插入到路由模板文件的指定位置上。

配置

配置参数

@sagaroute/cmd中支持指定的配置项如下所示：

配置项中所有参数的简要说明如下所示：

| 名称 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | dirpath | 页面文件目录路径 | string | 'src/pages' | | layoutDirPath | 全局路由目录路径 | string | 'src/layouts' | | routeFilePath | 指定路由模板文件的路径 | string | 'src/route.tsx' | | lazy | 路由是否懒加载 | boolean/Function(string): boolean | false | | hooks | 执行周期的钩子函数 | object | -- | | pathRewrite | 用于对 import 语句的路径进行替换 | Object{string: string} | -- | | rootPath | 项目路径 | string | process.cwd() | | onWarning | 触发警告时的回调函数 | function(message: string): void | -- |

对上述配置参数中更详细的说明可看API

配置设置方式

1. 运行sagaroute命令行时指定参数

如下：

# 指定 页面文件目录 和 路由模板文件 的路径
sagaroute --dirpath=src/views --routeFilePath=src/router/index.jsx

2. 在配置文件中指定参数

往项目中添加sagaroute.config.js或sagaroute.config.cjs作为配置文件，在文件中以CommonJS的格式编写和导出部分上述配置项，例如：

/** @type {import('@sagaroute/react').RoutingOption} */
module.exports = {
  // 指定页面文件目录
  dirpath: 'src/views',
  // 指定路由模板文件
  routeFilePath: 'src/router/index.jsx',
};

更多资料

• 约定式路由规则
• 配置项 API 说明
• 钩子函数
• 路由模板文件