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

原创

林小帅

修改于 2020-05-29 09:55:47

8750

修改于 2020-05-29 09:55:47

文章被收录于专栏：林小帅的专栏林小帅的专栏

上一篇《如何用 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 函数是可以捕获到其改动状态的。