快速打造简易的cli脚手架工具

📍 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

开始自定义cli脚手架

1. 新建脚手架目录

mkdir my_cli
cd my_cli
npm init

2. 新建bin文件夹，并在bin文件夹中新建cli.js文件

mkdir bin
touch cli.js

3. 在package.json中加入bin指令

当在package.json中加入bin字段时，npm会将

// package.json
{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "mycli": "./bin/cli.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

编辑cli.js文件

// cli.js
#! /usr/bin/env node
console.log('hello mycli')

在文件第一行加入 #!/usr/bin/env node，用于指定当前脚本由node.js进行解析

4. npm link链接到全局

npm link

执行完成后在控制台输入mycli测试一下

mycli

我们可以看到控制台输出了

hello mycli

这样我们就创建了一个简易的脚手架工具

常用的脚手架工具

常用脚手架工具	用途
commander	用于编写指令和处理命令行
chalk	用于修改控制台输出样式，如颜色
figlet	用于生成logo等海报文字
inquirer	与用户交互工具
ora	用于显示加载进度条

为脚手架添加commander

1. 安装commander

npm install commander --save-dev

2. commander编写指令

// cli.js
#!/usr/bin/env node
const program = require('commander')

program.command('create <app-name>')
       .description('create a new project')
       .action(name => {
           console.log('name:',name)
       })

// version直接使用package.json的版本号
program.version(require('../package.json').version)

// 解析用户执行命令传入参数
program.parse(process.argv);

3. 测试

在控制台中输入mycli，看控制台输出的内容

此时我们输入mycli create project，会看到控制台会打印

name: project

figlet

1. 安装figlet

npm install figlet --save-dev

2. 使用figlet输出炫酷的文字

// cli.js
#!/usr/bin/env node
const program = require('commander')
const chalk = require('chalk')
const figlet = require('figlet')

program
.command('create <name>')
.description('create a new project')
.action(name => { 
    console.log('name:', name);
    console.log(figlet.textSync('mycli!', {
      font: 'Ghost',
      horizontalLayout: 'default',
      verticalLayout: 'default',
      width: 80,
      whitespaceBreak: true
  }));
})

program.version(require('../package.json').version)

program.parse()

在控制台输入mycli create app，可以看到控制台输出了一串炫酷的文字

看起来还不错，接下来用粉笔chalk修改输出的颜色

chalk粉笔美化输出内容

1. 安装chalk

npm install chalk --save-dev

2. 使用chalk更改mycli输出的颜色

#! node
const program = require('commander')
const chalk = require('chalk')
const figlet = require('figlet')

program
.command('create <name>')
.description('create a new project')
.action(name => { 
    console.log('name:', name);
    console.log(chalk.cyan(figlet.textSync('mycli!', {
      font: 'Ghost',
      horizontalLayout: 'default',
      verticalLayout: 'default',
      width: 80,
      whitespaceBreak: true
  })));
})

program.version(require('../package.json').version)

program.parse()

可以看到控制台输出的mycli的颜色修改成了cyan

inquirer 用户交互工具

1. 安装inquirer

npm install inquirer --save-dev

2. 使用inquirer设置问题

// cli.js
#! /usr/bin/env node

const inquirer = require('inquirer')

inquirer.prompt([
  {
    type: 'input', //type： input, number, confirm, list, checkbox ... 
    name: 'name', // key 名
    message: 'Your name', // 提示信息
    default: 'my-node-cli' // 默认值
  }
]).then(answers => {
  // 打印互用输入结果
  console.log(answers)
})

3. 测试

在控制台中输入mycli create app，控制台弹出问题"Your name"，我们输入mycli后，看控制台输出的内容

这样一来一个简易的cli脚手架