用node編寫cli工具

cli是command-line interface的縮寫，即命令行工具，經常使用的vue-cli， create-react-app， express-generator 等都是cli工具。

本文以本身開發my-cli爲例，將開發到發佈過程完整記錄下來，看完本文，你將學會如何從零開發一個cli項目，如何上傳到github庫，以及如何使用npm發佈本身的包。

準備

開發一個cli工具前首先要想好它能作什麼。以我本身爲例，我須要一個工具，讓我能只輸入一行命令就幫我快速搭建好項目結構，就像這樣：

是否是很炫酷？放心，很簡單。

開始

首先建立你的cli項目，並使用npm init建立一個package.json。

$ mkdir my-cli && cd my-cli
$ npm init

根據提示一步步建立好package.json。name屬性就是你發佈到npm上的名字，這個是不能與npm上現有項目重名的，一個小技巧是使用npm info查看你想要起的包名字，若是報錯404，那麼你的包名是可用的。最後建立好的package.json文件像這樣子：

{
  "name": "my-cli",
  "version": "0.0.1",
  "description": "Auto generate project template",
  "main": "index.js",
  "bin": {
    "my-cli": "./index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hlme/my-cli.git"
  },
  "keywords": [
    "cli"
  ],
  "author": "798400626@qq.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hlme/my-cli/issues"
  },
  "homepage": "https://github.com/hlme/my-cli#readme"
}

編寫可執行文件

package.json中有一個"bin"字段，配置後才能夠在控制檯使用你的命令。

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

咱們配置了"my-cli"命令來執行index.js文件。用你喜歡的編輯器，在項目主目錄下建立一個index.js文件。

注意第一行的"#! node"很重要，表示用node來執行這個文件。若是沒有這句聲明，就會在記事本中打開index.js文件。補充：linux/unix 下應該是#!/usr/bin/env node，參考這篇百度知道

全局安裝你的包

使用 npm install -g 將你當前的項目安裝到全局環境,如今你能夠在命令行使用"my-cli"命令了。

用fs模塊快速生成項目模板

咱們自定義的指令能夠執行了，接下來編寫代碼實現功能。my-cli的主要功能就是生成項目模板，一個思路是用一個templates文件夾保存項目模板，而後經過fs.mkdir()來建立項目目錄，最後把文件從templates文件夾拷貝到項目中去。

var fs = require('fs');
var path = require('path');

function copyTemplate (from, to) {
  from = path.join(__dirname, 'templates', from);
  write(to, fs.readFileSync(from, 'utf-8'))
}
function write (path, str, mode) {
  fs.writeFileSync(path, str)
}
function mkdir (path, fn) {
  fs.mkdir(path, function (err) {
    fn && fn()
  })
}

核心代碼就這麼點，是否是很是簡單？

整個項目文件結構差很少就這個樣子，把你須要的文件放到templates文件夾，而後用copyTemplate方法將文件拷貝到項目目錄下。

建立文件目錄和拷貝文件的過程，代碼看着比較醜陋

接收命令行參數

日常咱們使用命令行工具時都會用到參數，如 webpack -p, express -e 等，如今咱們來爲本身的cli添加接收命令行參數的功能。爲my-cli設計四個參數，用來向項目中添加類庫。

$ my-cli -j -s -v -b
//-j :添加jQuery
//-s :添加Swiper
//-v :添加Vue
//-b :添加Bootstrap

使用commander包能夠方便的解析命令行參數，可是本項目不打算引入其餘依賴，順便學習如何手動解析命令行參數。
咱們可使用process.argv來獲取命令行參數，process.argv是一個參數數組，第一項爲node.exe的絕對路徑，第二項爲執行該js的絕對路徑，使用process.argv.slice(2)便可獲取輸入的參數數組。

經過遍歷參數數組來檢查命令中輸入了哪些參數。若是輸入了預設的參數，就爲config對象添加對應的屬性，在生成文件時根據onfig判斷是否將模板文件拷貝到項目中。繼續醜陋的代碼：

本地運行

至此咱們的項目已經基本完成了，使用 npm install -g 將項目安裝到全局環境，而後新建一個項目文件夾，使用my-cli命令來生成項目模板。

發佈到npm倉庫

要想將本身的包發佈到npm上，首先得有一個npm帳號，建立帳號很是簡單，輸入npm adduser，簡單三步便可完成建立。

建立好user後，使用npm publish便可將當前項目發佈到npm上了，之後就可使用npm install -g my-cli 來安裝你的cli工具。

上傳到github

開發了本身的npm包，若是想得到更多人的關注，上傳到github上是個比較好的辦法，推薦一篇教程：GitHub 教程。

結束語

相信你們看完本文後知道如何根據本身的需求製做cli工具了。本文中的my-cli功能比較簡單，只爲作一個簡單的例子。查看源碼能夠點這裏：my-cli。
更加實用一點的有 init-react - 參考vue-cli開發的react項目生成工具，主要考慮create-react-app生成的項目隱藏了配置不方便修改，eject後又過於混亂。。（逃）