工作中接到新項目,開發前都需要先規劃項目目錄,然後一個個創建文件,搭建sass編譯環境,下載jquery,Swiper等類庫... 這些準備工作都要花上不少時間。每做一個項目,都會遇到同樣的問題,再重複一遍嗎?
是時候做點改變了:編寫自己的cli工具,一行命令,3秒鐘進入coding狀態!
本文以自己的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 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文件。
注意第一行的"#! 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包可以簡化解析參數過程,但是本項目比較簡單,我也不想額外引入其他的包了,處理一些簡單的參數其實並不難。
node中我們可以使用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上是個比較好的辦法