0基础教你开发自己的CLI（一）

前言

在前端开发中，拥有一套高效、简洁、适合自己的前端项目构建工具是非常有必要的。毕竟市面上不是所有的工具都能满足自己复杂工作的需要。此外也希望可以将此技术服务于其他的伙伴们。

本文分为几个章节，本章节讲述cli基础功能，从初始化项目到clone远端模板的流程。敬请期待其他章节

搭建CLI准备

每一次成功，我们都是站在巨人的肩膀上。

首先简单介绍几个常用的依赖的包
commander：命令行接口的完整解决方案，设置一些node命令，如help、usage、version、parse输入的参数。
download-git-repo：git代码下载库，存到本地。
chalk: node终端样式库，可以修改console的输出颜色。
inquirer: 用户与命令行之间的交互问答工具。
ora：终端旋转器，loading小圈圈。
rimraf：删除文件。

初始化项目

创建项目文件夹，执行以下命令，创建项目package.json。

$ npm init

初始化结果

{
  "name": "cli",
  "version": "1.0.0",
  "description": "0基础教你开发自己的CLI",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "cli"
  ],
  "author": "猿话",
  "license": "ISC"
}

编辑项目

修改package.json文件，添加bin中的CLI将是我们执行的命令，和依赖库。

{
  "name": "cli",
  "version": "1.0.0",
  "description": "0基础教你开发自己的CLI",
  "main": "main.js",
  "bin": {
    "CLI": "./bin/cli"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "inquirer": "^4.0.0",
    "ora": "^1.3.0",
    "rimraf": "^2.6.2",
    "chalk": "^2.3.0",
    "commander": "^2.11.0",
    "download-git-repo": "^1.0.1"
  },
  "keywords": [
    "cli"
  ],
  "author": "猿话",
  "license": "ISC"
}

新增bin/cli目录文件，编写bin/cli文件。

首先我们先编写一个输出cli版本号的命令

#!/usr/bin/env node
//第一行其中#!/usr/bin/env node表示用node解析器执行本文件。

const program = require('commander')
const pkg = require('../package')
const chalk = require('chalk')
const download = require('download-git-repo');
const ora = require('ora');
const spinner = ora('Loading undead unicorns');

/**
 * version
 */
program
  .version(chalk.green(`${pkg.version}`))

/**
* init 项目
*/
program
  .command('init <app-name>')
  .description('generate a project from a remote template (legacy API, requires ./wk-init)')
  .option('-c, --clone', 'Use git clone when fetching remote template')
  .action((template, appName, cmd) => {
    spinner.start('开始下载');
    download('direct:https://github.com/study-demo/cli-demo.git', appName, { clone: true }, err => {
      if (err) {
        spinner.fail(chalk.green('下载失败 \n' + err));
        process.exit();
      }
      spinner.succeed(chalk.green(`下载成功`));
    });
  })

program.parse(process.argv)

到此一个简单的cli就搭建完成。

本地调试

本地安装

npm install -g
OR
npm link // 添加软连接

调试

// 查看版本号
CLI -V
OR 
node bin/cli -V

// 初始化项目
CLI init <app-name>
OR 
node bin/cli init <app-name>

发布到npm

npm login 
npm publish

详细信息参考：《一分钟教你发布npm包》