Skip to content

knightyun/data-to-code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

简体中文 | English

logo

npm license npm version npm downloads npm bundle size

GitHub stars GitHub forks Github issues

data-to-code

一款代码生成器,可根据指定的源数据和模板代码,合成具有重复性的业务代码

背景

以前端开发为例(包括但不限于),有时会在功能设计文档或需求文档中,遇到一些数据量偏大的业务需求,动辄几十个字段需要写进前端代码逻辑或配置中,比如下面一个示例的功能文档:

字段名 描述 是否必输 ...
id ID true ...
firstName Fist Name true ...
lastName Last Name true ...
age Age false ...
hobby Hobby false ...
... ... ... ...

而在前端工程中,某配置文件中需要逐个录入上述信息,编写类似下面的配置代码:

{
    name: 'id',
    label: 'ID',
    required: true,
    // ...
},
{
    name: 'firstName',
    label: 'Fist Name',
    required: true,
    // ...
},
{
    name: 'age',
    label: 'Age',
    required: false,
    // ...
},
// ...

假设该表格有超过 20 行,甚至更多列的数据,额,简直噩梦 😱;当然,有小伙伴会选择使用正则表达式,或者一些编辑器自带的批量处理功能,似乎也不是一件轻松事儿;

于是乎,有了这个 轮子 工具 🚲;

安装

全局安装命令行工具:

npm install -g data-to-code

或者:

yarn global add data-to-code

使用

获取帮助信息:

d2c --help

直接在当前目录下生成 code.txt 代码文件,但是需要当前目录中存在 data.csvtemplate.txt 文件,这两个文件的具体配置方法请参考 配置,如果这两个文件不存在,则该命令会在当前目录下自动生成这两个文件:

d2c -g

然后可以对这两个文件填充内容后,再次运行上述命令生成代码文件:

也可以选择使用其他名称,取代默认的输入或输出文件名:

d2c -g -d data.txt -t template.txt -o myCode.txt

配置

数据文件

CSV

数据文件用于提供数据源,工具识别后会结合 模板代码文件 生成相应的合成代码,目前可以识别 .csv.txt 文件,如不指定会默认识别当前目录下的 data.csv 文件,可以使用 Excel 等工具编辑或生成该文件,以下是该项目的示例数据文件 data.csv 中的内容:

name,label,required
id,ID,true
firstName,Fist Name,true
lastName,Last Name,true
age,Age,false
hobby,Hobby,false

Excel 预览:

name label required
id ID true
firstName Fist Name true
lastName Last Name true
age Age false
hobby Hobby false

如果产品提供的功能文档中的数据表格直接就是表格的格式(Word, Excel),那么就可以直接批量复制粘贴到用 Excel 打开的 csv 文件中,然后对格式稍作处理;

TXT

工具同时也支持 .txt 格式的文档,不过字段之间需要使用一个或多个的 空格" ") 或 制表符\t)进行分割,如果某项数据中也包含有空格,则需要使用双引号("")进行包裹;例如本项目中示例数据文件 data.txt 中的内容:

name        label           required
id          ID              true
firstName   "Fist Name"     true
lastName    "Last Name"     true
age         Age             false
hobby       Hobby           false

数据中的 表头(第一行)代表不同的 字段 名,供下面会提到的模板代码使用,剩下的内容则是不同字段所对应的一系列行数据;

模板代码文件

模板代码指一套指定格式的代码模板,提供 “插槽” 让工具批量插入数据并合成总代码;模板代码文件是普通的 .txt 文本文件,直接编写正常的代码逻辑,只是需要使用双花括号 {{ }} 引入数据文件中的 字段,字段两侧有无空格无所谓,如果代码本身存在双花括号,则需要进行转义(\{\{ \}\});例如本项目中的示例模板代码文件 template.txt 中的内容:

{
  name: '{{ name }}',
  label: intl.get('test.model.{{ name }}').d('{{ label }}'),
},

其中的 name, label, required 三个字段则分别对应前面的数据文件中的三个表头列,顺序无需固定;

示例

利用之前提到的数据文件和模板代码文件,可以生成合成后的输出代码示例;具体步骤为 clone 本项目到本地后,运行测试脚本 npm run test,运行成功后,会提示在项目的 test/ 目录下生成了合成代码文件 code.txt,内容如下:

{
  name: 'id',
  label: intl.get('test.model.id').d('ID'),
  required: true,
},
{
  name: 'firstName',
  label: intl.get('test.model.firstName').d('Fist Name'),
  required: true,
},
{
  name: 'lastName',
  label: intl.get('test.model.lastName').d('Last Name'),
  required: true,
},
{
  name: 'age',
  label: intl.get('test.model.age').d('Age'),
  required: false,
},
{
  name: 'hobby',
  label: intl.get('test.model.hobby').d('Hobby'),
  required: false,
},

然后直接复制代码粘贴到所需项目中即可;

About

代码生成器,可根据源数据和模板代码生成目标代码

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published