cli 脚手架简单实现 含demo源码

1,200 阅读2分钟

cli 脚手架简单实现

npm-link 命令与package.json bin组合 -- 全局命令

在工具包没有publish到远程时,可以用npm link,链接到本地全局,可用对应的命令执行js脚本,一般用于调试本地的包。 例子:

package.json加入配置

"bin": {
    "my-cli-demo": "bin/index.js"
 },

在项目根目录命令行npm link 再执行 my-cli-demo即可运行bin/index.js脚本,类似于vue-cli的vue create project-name

在bin/index.js文件第一行需要加上#!/usr/bin/env node 备注该文件是可执行文件

如:

#!/usr/bin/env node

const commander = require("commander");

如果工具已经调试完成并publish到远程仓库,需要用 npm unlink <package> -g注销,再用 npm install <package> -g全局安装远程的工具包。


commander与inquirer组合 -- 交互式命令行

commander的作用是定义命令、选项、帮助和业务逻辑,类似于vue create <project-name>, vue执行对应的文件,create <project>执行对应的处理函数

如以下代码:当在命令行执行 my-cli-demo init/i时,会进入对应action回调里,更多参数选择commander.js文档

#!/usr/bin/env node

const commander = require("commander");
commander
  .command("init") // 命令
  .alias("i") // 命令别名
  .description("初始化一个项目") // 命令描述
  .action(function () {
  });

inquirer的作用是提供命令行的交互,获取用户的选择参数,进行下一步的操作。更多选项类型参考Inquirer.js文档

如以下代码:

#!/usr/bin/env node

const commander = require("commander");
const inquirer = require("inquirer");

commander
  .command("init") // 命令
  .alias("i") // 命令别名
  .description("初始化一个项目") // 命令描述
  .action(function () {
    //初始化参数
    const promptInit = [
      {
        type: "input",
        message: "输入项目名称:",
        name: "name",
        default: "MyProject",
      },
      {
        type: "list",
        message: "选择项目类型:",
        name: "type",
        choices: ["demo-type-1", "demo-type-2"],
      },
    ];

    inquirer.prompt(promptInit).then((answers) => {
        console.log(answers) // answers = {name: 'pro', type: 'demo-type-2'}
        // ...do something
    })

  });

命令行交互.png

这就是CLI脚手架的简单实现,可以以此为基础不断壮大脚手架

项目地址