学习脚手架第四节：脚手架的命令注册和参数解析

我们经常用 vue-cli 创建脚手架的童鞋经常使用 vue create 项目名 来创建 vue 项目，又或者用 vue -V vue --version 来获取版本号，那么输入这些命令的参数是如何解析并进行对应操作的呢？下面我们一一来看。

一、目标

1. 注册一个命令 view-test-cli init

   （这里我继续沿用 view-test-cli，这是我们自己取的脚手架名称）

2. 实现参数解析 --version 和 init --name

   使用 view-test-cli --version / view-test-cli -V 获取版本号

   使用 view-test-cli init --name 项目名称 来初始化项目

二、注册一个命令 init

1. 调试准备

此时使用 学习脚手架第三节：脚手架的分包和多模块调试 介绍的方法，将线上发布模式转成本地开发模式

2. 代码实现

具体细节看代码注释

view-test-cli\bin\index.js

#!/usr/bin/env node

// 1.注册一个命令 view-test-cli init
const process = require("process");
const lib = require("view-test-lib");

// process 是nodejs中的一个模块，通过 process.argv 可以拿到命令行的所有参数
const argv = process.argv;
// console.log(argv); //这里可以打印试试
let command = argv[2];
if(command){
  if(lib[command]){
    lib[command]();
  }else{
    console.log("无效的命令");
  }
}else{
  console.log("请输入命令");
}

view-test-lib\lib\index.js

module.exports = {
  sum(a, b) {
    return a + b;
  },
  sub(a, b) {
    return a - b;
  },
  init(){
    console.log("执行init流程")
  }
};

3. 实现效果

执行命令：

# 正确执行init命令
view-test-cli init 
# 执行没有定义的命令
view-test-cli aaa
# 没有输入命令
view-test-cli

效果如下：

三、实现参数解析 --version 和 init --name

1. 代码实现

view-test-cli\bin\index.js

#!/usr/bin/env node

/**
 * 实现参数解析 --version 或 -V 和 init --name
 * 例如：
 * 命令：        view-test-cli init --name myProject
 * 对应下标index:                2     3      4
 */

const process = require("process");
const lib = require("view-test-lib");
const pkg = require("../package.json");

// 拿到所有参数
const argv = process.argv;
// console.log(argv);
let params = argv.slice(3); //--name myProject
// console.log(params, "params");
let command = argv[2];
if (command) {
  if (params.length > 1) {
    let [option, param] = params;
    option = option.replace("--", "");
    // console.log(option, param);
    // 实现 init 初始化功能，并传参
    if (lib[command]) {
      lib[command](option, param);
    }
  }

  // 实现查找版本 --version  -V
  //以--或-开头
  if (command.startsWith("--") || command.startsWith("-")) {
    let globalOption = command.replace(/--|-/g, "");
    // console.log(globalOption);
    if (globalOption === "version" || globalOption === "V") {
      // 从 package.json 中动态读取版本号
      console.log(pkg.version);
    }
  } else if (!lib[command]) {
    console.log("无效的命令");
  }
} else {
  console.log("请输入命令");
}

view-test-lib\lib\index.js

module.exports = {
  sum(a, b) {
    return a + b;
  },
  sub(a, b) {
    return a - b;
  },
  // 接收参数
  init(option, param) { 
    console.log("执行init流程", option, param);
  },
};

2. 实现效果

执行命令：

view-test-cli --version
view-test-cli -V
view-test-cli
view-test-cli bbb
view-test-cli init --name myProject

效果如下：

再通过 学习脚手架第三节：脚手架的分包和多模块调试 介绍的方法，将本地开发模式转为线上发布模式，使用 npm publish 进行线上发布，再安装使用。

以上我们使用原生 nodejs 实现了一个简单的命令注册和参数解析案例。

总结

我们通过 nodejs 的 process 模块获取到命令行参数，并进行一系列逻辑判断，实现用户输入命令，执行命令对应的操作（这里用console.log 模拟操作)

在实际项目应用中，一般会借助生成脚手架的框架来实现。

目前市场占有率较高的脚手架框架是 yargs 和 commander。

那我们熟悉的脚手架 vue-cli 就是使用 commander 框架实现，学习 vue-cli 源码，首先要了解 commander 框架的基本实现。

下一节就来看看 commander 框架的一些基础配置