如何在开发中减少重复工作?

唯有奶茶解百忧
75 阅读3分钟

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

本篇文章介绍的是tdesign-vue如何减少开发中的重复工作？

如何使用？

老规矩，我们知道tdesgin-vue怎么工作的，先得看看如何使用它？ 首先把项目克隆到本地。

git clone --recurse-submodules https://github.com/Tencent/tdesign-vue.git 
cd tdesign-vue 
# 开发预览 
npm install 
yarn install
  • 新增组件： npm run init <componentName>
  • 删除组件：npm run init <componentName> del

image.png

执行完新增组件的脚本后，我们发现/examples、/test/unit、/test/e2e、/src四个文件夹下都创建了testComp文件夹。

/examples: 里面包含了使用示例和说明文档。

image.png /test/unit: 里面包含了使用示例是否能正常渲染到页面上的测试和组件属性以及方法的单元测试；

image.png /test/e2e: 里面就一个文件，关于页面交互的测试。

image.png /src: 里面两个文件，一个入口文件和一个源码文件

image.png src/index.ts 新增了import TestComp from './testComp';这一句

新增完了之后，我们再试试删除组件的效果是怎么样的？

image.png 我们发现刚新增的文件都被删除了，相当于一个撤回新增的操作。在src/index.ts文件中移除了testComp的引用。

源码

知道了新增和删除组件是做啥的之后，我们看看怎么如何实现？

找入口

npm run init <componentName>，这个脚本我们应该从package.json里的scripts属性找对应的init,发现它执行了node script/init,显然是通过node执行了一个本地文件，/script/init就是文件所在位置，最终我们就锁定到script/init/index.js

分析源码

image.png 看到这个目录结构，有没有很熟悉? tpl：很明显是写入文件使用的模板 config.js: 是一个对象，描述组件的输出上述的四个文件夹以及文件夹需要创建的文件。 index.js：这个文件里写的就是主线任务啦 155行：init()开始主线任务

  1. component, isDeleted从命令行解析出组件名字和是否删除的标志
  2. 如果是删除的指令，执行的是deleteComponent和deleteComponentFromIndex,否则执行的是addComponent，insertComponentToIndex
    • deleteComponent: 通过配置文件得到删除的文件信息，递归删除
    • deleteComponentFromIndex：读取文件，找到组件的引用，替换成空字符串, 将新的内容写入文件
    • addComponent: 通过配置文件得到创建的文件的各个目录和模板内容写入对应的文件
    • insertComponentToIndex：这个和删除的类似，新增一条新的组件引用，首先获取组件名首字母大写得到组件的导入语句， 正则匹配到最后一行引用，读取src/index.ts文件内容，如果已经有组件的导入语句就直接返回，否则在最后一行引用插入导入语句。

结束语

node在读取文件和写入文件都可以直接通过api调用，我们平时开发如果遇到这种重复的工作都可以自己写个node服务来简化重复的工作。

avatar
文章
阅读
粉丝