一款按业务领域组织代码的工具

适用脚手架：https://github.com/JinJieTan/fed-zulin-template

npm install -g react-antd-cli 使用

antd g module xxx

生成xxx文件夹，里面包含的文件：

└── xxx ├── index.less // 样式文件 ├── index.test.tsx // 测试文件 ├── index.tsx // 业务入口组件 ├── model.ts // 状态管理文件 ├── provider.ts // 常量、业务函数抽离的服务 ├── routes.ts // 路由文件 ├── service.ts // 接口服务文件 ├── type.ts // 类型文件 index.tsx

import React from 'react'; import { Switch } from 'dva/router'; import { RouteChildrenProps } from 'react-router'; import './index.less'; interface IProps extends RouteChildrenProps { children: any } const Xxx = (props: IProps) => { const { children } = props; return ( <div className="xxx"> This is module xxx, please delete this line in your project. <Switch> {children} </Switch> </div> ); }; export default Xxx; index.less

.xxx { } routes.ts // 路由

import { IRoute } from '@/types/common'; let routes: Array<IRoute> = [ { path: '/xxx', component: () => import('./index'), models: () => [import('./model')], routes: [ ] }, ]; export default routes;

type.ts // 类型

index.test.tsx // 测试文件

import React from 'react' import { shallow } from 'enzyme' // 本例子只以shallow(浅渲染，只渲染父组件)为例 import Xxx from './index' // 导入需测试的组件 declare const test: any; declare const expect: any; test('Xxx', ()=>{ const props = { history: {} as any, location: {} as any, match: {} as any, children: null } const item = shallow(<Xxx {...props}/>); expect(item.hasClass('xxx')).toBe(true) }) service.ts // 接口服务文件

import ajax from '@p/api/utils/ajax'; // export service functions

provider.ts // 常量、业务函数抽离的服务

model.ts // dva文件，放redux

export default { namespace: 'xxx', state: { }, reducers: { // reducers function }, effects: { // effects function }, };

antd g page yyy

生成yyy文件夹

​里面包含的文件：

└── yyy ├── index.less // 样式文件 ├── index.test.tsx // 测试文件 ├── index.tsx // 页面组件 ├── service.ts // 接口服务文件 └── type.ts // 类型文件 index.tsx

import React from 'react'; import { RouteChildrenProps } from 'react-router'; import './index.less'; interface IProps extends RouteChildrenProps { // extends type of props } const XxxYyy = (props: IProps) => { const { children } = props; return ( <div className="xxx-yyy"> This is page yyy, please delete this line in your project. </div> ); }; export default XxxYyy;

Xxx是当前路径下的父文件夹名（即刚才通过antd g page 生成的module名）

.xxx-yyy { } index.test.tsx // 测试文件

import React from 'react' import { shallow } from 'enzyme' // 本例子只以shallow(浅渲染，只渲染父组件)为例 import XxxYyy from './index' // 导入需测试的组件 declare const test: any; declare const expect: any; test('XxxYyy', ()=>{ const props = { history: {} as any, location: {} as any, match: {} as any, children: null } const item = shallow(<XxxYyy {...props}/>); expect(item.hasClass('xxx-yyy')).toBe(true) }) type.ts

并且更新module里的routes.ts

import { IRoute } from '@/types/common'; let routes: Array<IRoute> = [ { path: '/xxx', component: () => import('./index'), models: () => [import('./model')], routes: [ { path: '/xxx/yyy', component: () => import('./yyy'), routes: [ ] } ] }, ]; export default routes; service.ts // 接口服务文件

import ajax from '@p/api/utils/ajax'; // export service functions

1、如果yyy里含有detail或者edit字符将会为path后加id, eg: /xxx/yyy/:id
2、如果手动改了routes.ts文件，如删除了routes字段会造成更新错误，请手动调整
3、参数-r, --redirect, 该路由为重定向路由
4、参数-f, --father, 父级路由路径，默认为当前模块路由路径/xxx

antd g component zzzComponent

3.1 在公共组件下src/components生成ZzzComponent文件夹

​里面包含的文件：

└── ZzzComponent ├── index.less // 样式文件 └── index.tsx // 组件 index.tsx

import React from 'react'; import './index.less'; interface IProps { } const ZzzComponent = (props: IProps) => { return ( <div className="zzz-component"> This is component ZzzComponent, please delete this line in your project. </div> ); }; export default ZzzComponent; index.less

.zzz-component { }

3.1 业务组件中默认生成扁平的结构 ​里面包含的文件：

└── components ├── ZzzComponent.less // 样式文件 └── ZzzComponent.tsx // 组件 ... ZzzComponent.tsx

import React from 'react'; import './ZzzComponent.less'; interface IProps { } const ZzzComponent = (props: IProps) => { return ( <div className="zzz-component"> This is component ZzzComponent, please delete this line in your project. </div> ); }; export default ZzzComponent; ZzzComponent.less

.zzz-component { }

1、可以通过参数-f, --folder, 来控制以文件夹格式组织