如何实现 CLI 通过模板批量生成组件文件？

上一篇 《如何用 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：https://github.com/linxsbox/ImTheCat/tree/dev/build

希望可以抛砖引玉，大佬勿喷，欢迎交流你的想法。

感谢阅读。

版权声明：

本文版权属于作者 林小帅，未经授权不得转载及二次修改。

转载或合作请在下方留言及联系方式。