用node編寫自己的cli工具

工作中接到新項目,開發前都需要先規劃項目目錄,然後一個個創建文件,搭建sass編譯環境,下載jquery,Swiper等類庫... 這些準備工作都要花上不少時間。每做一個項目,都會遇到同樣的問題,再重複一遍嗎?
是時候做點改變了:編寫自己的cli工具,一行命令,3秒鐘進入coding狀態!

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

準備

開發一個cli工具前首先要想好它能做什麼。以我自己爲例,我需要一個工具,讓我能只輸入一行命令就幫我快速搭建好項目結構,就像這樣:
img
是不是很炫酷?放心,很簡單。

開始

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

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

根據提示一步步創建好package.json。name屬性就是你發佈到npm上的名字,這個是不能與npm上現有項目重名的,一個小技巧是使用npm install下載你想要起的包名字,如果報錯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": "[email protected]",
  "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文件。
1150501-20170522131945882-1522708990.png
注意第一行的"#! node"很重要,表示用node來執行這個文件。如果沒有這句聲明,就會在記事本中打開index.js文件。補充:linux/unix 下應該是#!/usr/bin/env node,參考這篇百度知道

全局安裝你的包

使用 npm install -g 將你當前的項目安裝到全局環境,現在你可以在命令行使用"my-cli"命令了。
1150501-20170522133313788-1604516323.png

用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方法將文件拷貝到項目目錄下。
1150501-20170522141007320-204854793.png

創建文件目錄和拷貝文件的過程,代碼看着比較醜陋
1150501-20170522140747601-984317312.png

接收命令行參數

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

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

使用commander包可以簡化解析參數過程,但是本項目比較簡單,我也不想額外引入其他的包了,處理一些簡單的參數其實並不難。
node中我們可以使用process.argv來獲取命令行參數,process.argv是一個參數數組,第一項爲node.exe的絕對路徑,第二項爲執行該js的絕對路徑,使用process.argv.slice(2)即可獲取輸入的參數數組。

1150501-20170522142632898-1585118250.png
通過遍歷參數數組來檢查命令中輸入了哪些參數。如果輸入了預設的參數,就爲config對象添加對應的屬性,在生成文件時根據onfig判斷是否將模板文件拷貝到項目中。繼續醜陋的代碼:
1150501-20170522142902757-1585121991.png

本地運行

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

發佈到npm倉庫

要想將自己的包發佈到npm上,首先得有一個npm賬號,創建賬號非常簡單,輸入npm adduser,簡單三步即可完成創建。
1150501-20170522143107757-1996993063.png
創建好user後,使用npm publish即可將當前項目發佈到npm上了,以後就可以使用npm install -g my-cli 來安裝你的cli工具。
1150501-20170522153546257-1679238706.png

上傳到github

開發了自己的npm包,如果想獲得更多人的關注,上傳到github上是個比較好的辦法


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章