@chenhailong/codegen
v0.0.45
Published
- 灵活:结果 = 数据(无限扩展)+ 模版(无限扩展) - 无限扩展性: codegen/data.config.js 支持字段无限扩展; 模版支持逻辑编写 - 书写方便: 模版所见即所得(语法简单、可加逻辑) - 运行环境:需要有node环境就可运行 - 兼容性好:因为模版无限制,所以生成任意语言代码=》小程序、vue、react、dart、flutter、java等 - 支持git:项目有git仓库,自动读取git用户信息 - 提示友好:
Downloads
67
Readme
特点
- 灵活:结果 = 数据(无限扩展)+ 模版(无限扩展)
- 无限扩展性: codegen/data.config.js 支持字段无限扩展; 模版支持逻辑编写
- 书写方便: 模版所见即所得(语法简单、可加逻辑)
- 运行环境:需要有node环境就可运行
- 兼容性好:因为模版无限制,所以生成任意语言代码=》小程序、vue、react、dart、flutter、java等
- 支持git:项目有git仓库,自动读取git用户信息
- 提示友好:
新版本
- 安装
$ npm install -g @chenhailong/codegen
- 运行
$ codgen
_ ____
___ ___ __| | ___ / ___| ___ _ __
/ __| / _ \ / _` | / _ \ | | _ / _ \ | '_ \
| (__ | (_) | | (_| | | __/ | |_| | | __/ | | | |
\___| \___/ \__,_| \___| \____| \___| |_| |_|
简介:代码生成工具v0.0.40 @mail:[email protected]
Usage: codegen [global options] command
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
init init code gen config
gen [options] gen code from config
git get git info
help [command] display help for command
- 运行
$ codegen gen --help
_ ____
___ ___ __| | ___ / ___| ___ _ __
/ __| / _ \ / _` | / _ \ | | _ / _ \ | '_ \
| (__ | (_) | | (_| | | __/ | |_| | | __/ | | | |
\___| \___/ \__,_| \___| \____| \___| |_| |_|
简介:代码生成工具v0.0.40 @mail:[email protected]
Usage: codegen gen [options]
gen code from config
Options:
-t, --target [mode] Which [page、cmp、pageKeys] to use
-n, --nameCmp [name] Which name to use
-h, --help display help for command
Examples:
$ codegen gen -t page,生成页面
$ codegen gen -t cmp, 生成组件
$ codegen gen -t pageKeys, 解析json生成页面字段,用于data.config.js 中的 attributes
$ codegen gen -t type, 解析json生成typescript type
- 常用命令
$ codegen init
$ codegen gen -t pageKeys
$ codegen gen -t page
$ codegen gen -t cmp
配置说明
codeGen
├── cache.js // 配置文件
├── component.fun.tsx.tpl
├── component.tsx.tpl
├── data.config.js // 数据文件
├── data.json.js // json对象(约定接口字段)文件
├── hooks
│ └── definition.ts.tpl
└── tpls
└── definition.ts.tpl
2 directories, 7 files`
- codegen/cache.js
/*
* @version: v0.0.1
* @Author: hailong.chen <[email protected]>
* @Date: Wed Sep 23 2020 15:59:15 GMT+0800 (GMT+08:00)
* @LastEditors: hailong.chen
* @Descripttion: 用于生成页面的配置信息
*/
const codegenConf={
"datapath": "/codegen/data.config.js", // 产出页面路径,请替换
"outDir": '/src', // 产出页面路径,请替换
"tplpath": "/tpl", // 自定义模版路径
"codeType": "react", // 自定义模版路径
"suffix": "ts",
}
module.exports = codegenConf
- codegen/data.config.js
/*
* @version: v0.0.1
* @Author: {{{author}}}
* @Date: {{gmtTime}}
* @LastEditors: {{{author}}}
* @Descripttion:
*/
const config={
"path": "pages/hello", // 产出页面路径,请替换
"type": "page", // 页面类型(暂未使用),请替换
"title": "你好", // 页面标题,请替换
"apiPath": "", // 后端约定接口包
// 注:支持字段无限扩展 && 模版支持逻辑编写(扩展性好)
"statistic": [],// 页面统计部分,请替换
"attributes": [ // 页面字段,请替换
{ "key": "status", "type": "number", "annotation": "状态" },
{ "key": "checkDate", "type": "string", "annotation": "盘库日期" },
{ "key": "userId", "type": "number", "annotation": "经办人id" },
{ "key": "userName", "type": "string", "annotation": "经办人" },
{ "key": "checkNo", "type": "string", "annotation": "库存单号" },
{ "key": "remark", "type": "string", "annotation": "备注" },
{ "key": "preparedTime", "type": "string", "annotation": "制单日期" },
{ "key": "preparedUserId", "type": "number", "annotation": "制单人id" },
{ "key": "preparedUserName", "type": "string", "annotation": "制单名称" },
{ "key": "approveTime", "type": "string", "annotation": "审核日期" },
{ "key": "approveUserId", "type": "number", "annotation": "审核人ID" },
{ "key": "approveUserName", "type": "string", "annotation": "审核人" },
{ "key": "bookkeeperTime", "type": "string", "annotation": "记账日期" },
{ "key": "bookkeeperUserId", "type": "number", "annotation": "记账人ID" }
]
}
module.exports = config
优化点
1、将test0001-cli 更改为(CG:code gen) codegen
2、增加一个 init 交互命令
3、增加一个 --help -h 交互命令
解释:
1、模版使用语法
%=可解析变量=%
%={不解析变量}=%
4、ts 、 webpack重新写一个
版本 < v0.0.15
# 创建文件夹
mkdir demo && cd demo
# git 初始化项目
# git 初始化项目,cli需要获取git信息生成文件头注释
# 使用cli
npx @chenhailong/test001-cli
# 项目首次使用会初始化项目的配置信息
# codegen/cache.js
# codegen/data.config.js
# 再次运行,执行模版语法生成页面
TODO
- 可配置输出 现有默认输出,不能满足不同项目架构环境,将增加配置输出,由用户指定输出路径
- 路由自动更新 程序在生成页面后,仍然需要手动配置路由,有点重复劳动,将参考 <react-codemod | 采用读取更新的方式> 进行动态配置
- 逆向工程 注:可以根据页面逆向生成模版,模版将越来越多,书写代码将越来越少