快捷導(dǎo)航

詳解用node編寫自己的cli工具

更新時間：2017年05月23日 08:29:14 作者：huanglei-

這篇文章主要介紹了詳解用node編寫自己的cli工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

工作中接到新項目，開發(fā)前都需要先規(guī)劃項目目錄，然后一個個創(chuàng)建文件，搭建sass編譯環(huán)境，下載jquery，Swiper等類庫... 這些準備工作都要花上不少時間。每做一個項目，都會遇到同樣的問題，再重復(fù)一遍嗎？
是時候做點改變了：編寫自己的cli工具，一行命令，3秒鐘進入coding狀態(tài)！

本文以自己的my-cli為例，將開發(fā)到發(fā)布過程完整記錄下來，看完本文，你將學會如何從零開發(fā)一個cli項目，如何上傳到github庫，以及如何使用npm發(fā)布自己的包。

準備

開發(fā)一個cli工具前首先要想好它能做什么。以我自己為例，我需要一個工具，讓我能只輸入一行命令就幫我快速搭建好項目結(jié)構(gòu)，就像這樣：

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

開始

首先創(chuàng)建你的cli項目，并使用npm init創(chuàng)建一個package.json。

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

根據(jù)提示一步步創(chuàng)建好package.json。name屬性就是你發(fā)布到npm上的名字，這個是不能與npm上現(xiàn)有項目重名的，一個小技巧是使用npm install下載你想要起的包名字，如果報錯404，那么你的包名是可用的。最后創(chuàng)建好的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"
}

編寫可執(zhí)行文件

package.json中有一個"bin"字段，配置后才可以在控制臺使用你的命令。

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

我們配置了"my-cli"命令來執(zhí)行index.js文件。用你喜歡的編輯器，在項目主目錄下創(chuàng)建一個index.js文件。

注意第一行的"#! node"很重要，表示用node來執(zhí)行這個文件。如果沒有這句聲明，就會在記事本中打開index.js文件。

全局安裝你的包

使用 npm install -g 將你當前的項目安裝到全局環(huán)境,現(xiàn)在你可以在命令行使用"my-cli"命令了。

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

我們自定義的指令可以執(zhí)行了，接下來編寫代碼實現(xiàn)功能。my-cli的主要功能就是生成項目模板，一個思路是用一個templates文件夾保存項目模板，然后通過fs.mkdir()來創(chuàng)建項目目錄，最后把文件從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()
 })
}

核心代碼就這么點，是不是非常簡單？

整個項目文件結(jié)構(gòu)差不多就這個樣子，把你需要的文件放到templates文件夾，然后用copyTemplate方法將文件拷貝到項目目錄下。

創(chuàng)建文件目錄和拷貝文件的過程，代碼看著比較丑陋

接收命令行參數(shù)

平常我們使用命令行工具時都會用到參數(shù)，如 webpack -p, express -e 等，現(xiàn)在我們來為自己的cli添加接收命令行參數(shù)的功能。為my-cli設(shè)計四個參數(shù)，用來向項目中添加類庫。

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

使用commander包可以簡化解析參數(shù)過程，但是本項目比較簡單，我也不想額外引入其他的包了，處理一些簡單的參數(shù)其實并不難。

node中我們可以使用process.argv來獲取命令行參數(shù)，process.argv是一個參數(shù)數(shù)組，第一項為node.exe的絕對路徑，第二項為執(zhí)行該js的絕對路徑，使用process.argv.slice(2)即可獲取輸入的參數(shù)數(shù)組。