快捷導(dǎo)航

詳解用node編寫(xiě)自己的cli工具

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

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

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

本文以自己的my-cli為例，將開(kāi)發(fā)到發(fā)布過(guò)程完整記錄下來(lái)，看完本文，你將學(xué)會(huì)如何從零開(kāi)發(fā)一個(gè)cli項(xiàng)目，如何上傳到github庫(kù)，以及如何使用npm發(fā)布自己的包。

準(zhǔn)備

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

是不是很炫酷？放心，很簡(jiǎn)單。

開(kāi)始

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

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

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

編寫(xiě)可執(zhí)行文件

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

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

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

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

全局安裝你的包

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

用fs模塊快速生成項(xiàng)目模板

我們自定義的指令可以執(zhí)行了，接下來(lái)編寫(xiě)代碼實(shí)現(xiàn)功能。my-cli的主要功能就是生成項(xiàng)目模板，一個(gè)思路是用一個(gè)templates文件夾保存項(xiàng)目模板，然后通過(guò)fs.mkdir()來(lái)創(chuàng)建項(xiàng)目目錄，最后把文件從templates文件夾拷貝到項(xiàng)目中去。

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()
 })
}

核心代碼就這么點(diǎn)，是不是非常簡(jiǎn)單？

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

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

接收命令行參數(shù)

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

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

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

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

通過(guò)遍歷參數(shù)數(shù)組來(lái)檢查命令中輸入了哪些參數(shù)。如果輸入了預(yù)設(shè)的參數(shù)，就為config對(duì)象添加對(duì)應(yīng)的屬性，在生成文件時(shí)根據(jù)onfig判斷是否將模板文件拷貝到項(xiàng)目中。繼續(xù)丑陋的代碼：