generator-dc
v12.0.0
Published
react 项目快速开发脚手架
Downloads
10
Maintainers
sibar-rootReadme
介绍
generator-dc是一个react快速搭建脚手架项目，该项目依赖于 yeoman 。
使用者可参考 API 生成一套可供快速开发的 react web 项目，甚至在此基础上按规则生成react-router路由。
该脚手架内部集成了一些相对有用的开发工具，可供选择，使用者可根据自身喜好直接修改这些工具。
声明
该项目确定使用typescript作为类型系统，在选择该工具之前请先做了解。
该项目具有一定的普遍性，但并非万能，所有脚手架生成的代码可直接修改。 另外根据项目作者喜好，脚手架为使用者提供类似 use-agent-reducer 、antd 、type-qs 等便捷库， 使用者可自行参考这些库的文档，并使用它们。关于部分生成工具的使用说明，可参考生成项目不同目录下的 README.md 文件。
安装
一、安装 yeoman
npm install -g yo二、安装 generator-dc
npm install -g generator-dc使用
生成脚手架代码
输入命令
/path/my$ yo dc --git按提示进行功能选择：
- 请输入网页名称
- 请输入编译目标路径（可以是相对路径，默认为
../dist） - 请选择路由history类型（目前只支持
h5和hash两种单页模式） - 请选择测试模式:（该选择将直接影响后续使用的测试架构生成器的使用）
- 独立测试包 - 独立测试包会在当前项目的根目录下新建一个
test目录，test目录下的测试文件路径和src目录下的真实路径相对相同。 - 附属测试包 - 这个选择会直接在被测文件当前目录下简历同名的
*.test.ts(x)文件。
命令： yo dc
参数：
- --git:
generator-dc的修改统一加入git - --skip-install:
generator-dc在搭建完脚手架后不自动安装package.json中的内容
生成 react-router 路由
输入命令
// 生成 react-router 路由及相关目录
/path/my$ yo dc:route /myPage
// 生成 react-router 路由及相关目录，并指定当前路由为 index redirect 路由
/path/my$ yo dc:route /otherPage/subPage --redirect
// 清除所有路由
/path/my$ yo dc:route /生成目录：
+ src -
...
+ pages -
+ myPage -
index.tsx // 路由
layout.tsx // 页面渲染
style.less // less文件
+ otherPage -
index.tsx
childNodes.tsx // 二级子路由描述文件
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less
index.tsx // 总路由
childNodes.tsx // 一级子路由描述文件生成路由访问:
myPage页面路由
http://[host]:[?port]/[?basename/]my-pageotherPage页面路由
http://[host]:[?port]/[?basename/]other-page
因为该路由的子路由 subPage 使用了 --redirect 参数，所以自动跳转至
http://[host]:[?port]/[?basename/]other-page/sub-page命令：dc:route [path] path起点根目录为 ./src/pages
参数：
- --redirect: 指定当前路由为直接访问父路由时的默认转入子路由。
- --snake-case: 选择蛇形路由模式
- --force: 强制重写（对layout影响会比较大）
- --dev: 生成修饰页面
/path/my$ yo dc:route /myPage --snake-case效果
http://[host]:[?port]/[?basename/]my_page命令：dc:route [routes.json] [routes.json]为当前项目根目录下的 json 文件名，用来描述希望生成的路由
参数：
- --redirect: 指定当前路由为直接访问父路由时的默认转入子路由。
- --snake-case: 选择蛇形路由模式
- --force: 强制重写（对layout影响会比较大）
- --dev: 生成修饰页面
路由描述文件
[
{
"path": "/myPage",
"redirect": true
},
"/other-page",
{
"path": "/other-page/sub-page",
"redirect": true
},
"/other-page/more-page",
]生成目录：
+ src -
...
+ pages -
+ myPage -
index.tsx // 路由
layout.tsx // 页面渲染
style.less // less文件
+ otherPage -
index.tsx
childNodes.tsx // 二级子路由描述文件
layout.tsx
style.less
+ morePage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less
index.tsx // 总路由
childNodes.tsx // 一级子路由描述文件生成 agent-reducer 模型
输入命令
/path/my$ yo dc:agent /path/xxx可用于生成 agent 模型，如：
/path/my$ yo dc:agent /pages/myPage生成结构如下
+ src -
...
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts // agent-reducer 模型文件
style.less
type.ts // agent-reducer 模型类型文件
+ otherPage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less使用 --sharing 默认路径为 src/modules
/path/my$ yo dc:agent --sharing --name user生成结构如下
+ src -
...
+ modules -
+ user - // 共享 agent-reducer 模型名
index.ts // 共享 agent-reducer 模型文件
type.ts // 共享 agent-reducer 模型类型文件
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts
style.less
type.ts
+ otherPage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less命令：dc:agent [?path] path 起点根目录为 ./src
参数：
- --name: 指定 agent-reducer 模型名，在使用
--sharing参数且未指定生成路径时，会影响模型包的目录名，否则只会影响模型的类名，默认为Module。 - --sharing: 指定模型为共享模型，模型文件会导出 sharing 对象。
- --weak-sharing: 指定模型为弱共享模型，模型文件会导出 weakSharing 对象。
关于 agent-reducer 和 use-agent-reducer 使用方式请参考相关包文档。
生成单元测试
输入命令
/path/my$ yo dc:test /path/xxx[?.ts|.tsx]可用于生成指定路径目录或源码文件的测试脚本。
如：
/path/my$ yo dc:test /modules/user/index.ts独立包配置结果：
+ src -
...
+ modules -
+ user -
index.ts
type.ts
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts
style.less
type.ts
+ otherPage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less
+ test -
...
+ modules -
+ user -
index.test.ts // 测试脚本附属包配置结果：
+ src -
...
+ modules -
+ user -
+ __test__ -
index.test.ts // 测试脚本
index.ts
type.ts
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts
style.less
type.ts
+ otherPage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less可输入包名，生成当前包文件测试脚本。
/path/my$ yo dc:test /pages/otherPage独立包配置结果：
+ src -
...
+ modules -
+ user -
index.ts
type.ts
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts
style.less
type.ts
+ otherPage -
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less
+ test -
...
+ modules -
+ user -
index.test.ts
+ pages -
+ otherPage -
index.test.tsx // 测试脚本
layout.test.tsx // 测试脚本附属包配置结果：
+ src -
...
+ modules -
+ user -
+ __test__ -
index.test.ts
index.ts
type.ts
+ pages -
+ myPage -
index.tsx
layout.tsx
model.ts
style.less
type.ts
+ otherPage -
+ __test__ -
index.test.tsx // 测试脚本
layout.test.tsx // 测试脚本
index.tsx
layout.tsx
style.less
+ subPage -
index.tsx
layout.tsx
style.less命令：dc:test [?path] path 起点根目录为 ./src
参数：（无）
设置
在配置结束后，允许重新配置部分选项，可通过该命令进行再配置
/path/my$ yo dc:setting命令：dc:setting
参数：
- --lock: 锁定项目配置
- --unlock: 解锁项目配置
- --silent: 静默配置，不修改文件