手把手帶你開發一個前端命令行工具

手把手帶你開發一個前端命令行工具

---

命令行工具，即 Cli (command-line interface)。是在圖形用戶界面得到普及之前使用最爲廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令後，予以執行。
在學習這篇教程之前，我們需要先了解 NodeJs, NPM 和一些常用的 shell 命令相關知識點。
那怎樣纔可以從0創建一個命令行工具呢？

開發流程

1、首先我們需要創建我們的開發目錄，並且初始化我們的npm項目：

md damiao-vue && cd damiao-vue && cnpm init -y

2、新建一個可執行的damiao-vue.js文件，編輯如下：

#!/usr/bin/env node
console.log('Hello damiao-vue!');

3、我們在package.json中指定這個damiao-vue.js爲執行文件

{
  "bin": {
    "damiao-vue": "damiao-vue.js"
  }
}

4、接下來我們把我們的項目發佈到全局模式下，使用npm link，如果報錯記得用下npm unlink下
5、接下來我們安裝commander這個第三方庫

cnpm i commander

6、編輯damiao-vue.js這個文件如下：

#!/usr/bin/env node

const program = require('commander');

program
  .version('0.1.0')
  .option('-n, --yourname [yourname]', 'Your name')
  .option('-g, --glad', 'Tell us you are happy')
  .parse(process.argv);

if (program.yourname) {
  console.log(`Hello, ${program.yourname}! ${program.glad ? 'I am very happy to see you!' : ''}`);
}

7、然後在命令行中，輸入damiao-vue -h，打印如下：

Usage: damiao-vue [options]

  Options:

    -V, --version              output the version number
    -n, --yourname [yourname]  Your name
    -g, --glad                 Tell us you are happy
    -h, --help                 output usage information

8、大功告成，一個非常基礎的cli工具就製作完成了 ~~