0.0.9 • Published 3 years ago

data-to-code v0.0.9

Weekly downloads
27
License
MIT
Repository
github
Last release
3 years ago

logo

npm license npm version npm downloads npm bundle size

GitHub stars GitHub forks Github issues

data-to-code

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

背景

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

字段名描述是否必输...
idIDtrue...
firstNameFist Nametrue...
lastNameLast Nametrue...
ageAgefalse...
hobbyHobbyfalse...
............

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

{
    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 预览:

namelabelrequired
idIDtrue
firstNameFist Nametrue
lastNameLast Nametrue
ageAgefalse
hobbyHobbyfalse

如果产品提供的功能文档中的数据表格直接就是表格的格式(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,
},

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

0.0.9

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.4

3 years ago

0.0.0

3 years ago

0.0.1

3 years ago