上一篇 《如何用 Node.js 实现一个微型 CLI》 中介绍了如何使用 CLI 以及如何实现一个简单的问答式CLI。在文章的最后也提到我对于目前这个 CLI 还有一些想法以及一些可以改进和优化的地方,所以现在我来兑现了。
趁着周五不加班花了大概几个小时的时间,重新梳理了整个流程,把一些想法加了进去。周六白天对代码进行了重新梳理并编写实现,下午花了2小时调试完成。
这里没有借助任何第三方包,完全是使用 nodejs 实现。
使用方法
原命令保持不动,如无命令参数则使用 QA CLI 模式生成组件。
npm run ctpl// package.json
"scripts": {
"ctpl": "node build/index.js"
}新增命令参数符 “-c” 加上文件路径即可。
npm run ctpl -c a.json// 单组件配置
{
"fileName": "cpsName", // 组件名称
"filePath": "cpsPath", // 组件路径,默认为 ./viewx/ 下,支持别名 @ , cps
"codeType": "", // 代码类型 js / ts
"cssType": "", // 样式表类型 css / less / sass / scss
"fileApi": false // 是否生成 API 文件,生成内容规则尚未完善,目前仅生成文件
}
// 批量生成组件配置
[{
"fileName": "cpsName1",
"filePath": "cpsPath1",
"codeType": "",
"cssType": "",
"fileApi": false
}, {
"fileName": "cpsName2",
"filePath": "cpsPath1",
"codeType": "",
"cssType": "",
"fileApi": false
}, {
// ......
}]命令参数处理
使用 process.argv package 以及 process.npm_config_argv 来获取命令参数信息的,这样就可以处理命令参数符以及参数了。
- process.argv 获取在 package 脚本命令中的参数集列表
- process.npm_config_argv 获取命令行输入参数,即 npm 后出现的参数字符
异步批量处理
通过 Proxy 来实现针对异步创建文件和文件夹的完成与否,从而达到实现批量处理后统一返回数据。
我的想法是通过 Proxy 与 Promise 配合,利用 Promise pending 状态来阻塞执行,Proxy set 通过对数据的监听达到边界条件时再调用 Promise.resolve 让 Promise 继续执行。
实现手段
// 检查任务列表代理
const checkTasksListProxy = (targetArray, tasksNum = -1, resolve) => {
return new Proxy(targetArray, {
set(target, key, value, proxy) {
if (target.length === tasksNum) {
resolve(true);
return true;
}
return Reflect.set(target, key, value, proxy);
}
});
};
// 使用
// Promise((resolve, reject) => { ...
const tsnAsyncList = checkTasksListProxy([], cpsBase.length, resolve);通过对 tsnAsyncList 的修改,Proxy 的 set 函数是可以捕获到其改动状态的。
新旧流程对比
很久没有画流程图,画得不好,如有错误还请指正。
简单说一下,之前的流程呢那就比较厉害了!直接一把梭,往里干就完事!!!
现在的流程就比较磨唧了,不同的条件的走向不同,且还针对了不同的情况,例如是否是批量生成、文件夹的检查之类的。
单文件生成
最终生成的文件
批量生成
是否可以改进?
目前情况是已经完成了,但是如果你要问是否还有改进的空间?那么我可以很确定的回答你:“是的!还有改进的空间”。
因为我自己在完成后,开始画图分析的时候,发现还是有不少逻辑可以抽离出来的,目前还是有较强的耦合性,部分逻辑还有强关联性。
最后
虽然这只是一个小小功能改造而已,但是也记录我对一个功能的思考到底能有多深。不断的思考、实现和改进,也是不断的证明自己对一些场景的解决方案的分析能力。
[github] buildTpl希望可以抛砖引玉,大佬勿喷,欢迎交流你的想法。
感谢阅读。
版权声明:
本文版权属于作者 林小帅,未经授权不得转载及二次修改。
转载或合作请在下方留言及联系方式。