創(chuàng)建類似vue-cli、create-react-app的命令行工具
需要用到的幾個(gè)Node.js包:
commander
負(fù)責(zé)將輸入到終端的參數(shù)解析為選項(xiàng)和命令參數(shù);生成基礎(chǔ)的命令選項(xiàng)
inquirer
命令行問答模塊,自定義問題并對(duì)根據(jù)用戶回答做處理
chalk
修改終端輸出文字的樣式
ora
在終端顯示loading加載動(dòng)畫
download-git-repo
從?GitHub、GitLab、Bitbucket 等平臺(tái)下載倉庫
fs
Node.js的內(nèi)置讀寫文件目錄的模塊
基本流程:
生成 package.json 文件,并添加 bin 屬性;
在 bin 屬性值指定的目錄位置處編寫命令腳本;
運(yùn)行 npm link 將編寫的命令行工具添加到 Node.js 全局模塊目錄;
終端中運(yùn)行命令行工具測(cè)試;
發(fā)布到 npmjs.com;
全局安裝測(cè)試。
流程記錄:
1. 在 /test 測(cè)試目錄下運(yùn)行 npm init -y 生成package.json文件;
2. 安裝依賴
3.?package.json中添加 bin 屬性
4. 根據(jù)bin屬性,創(chuàng)建工具目錄:
上面示例 `pro-cli: 'bin/pro-cli.js` 表示在終端中運(yùn)行 pro-cli 命令時(shí),執(zhí)行當(dāng)前路徑下bin目錄中的 pro-cli.js 文件;所以創(chuàng)建 bin 目錄,在其下添加pro-cli.js文件,并在該js文件中編寫腳本
5. 在 /bin/pro-cli.js 中編寫腳本:
#! /usr/bin/env node 為固定寫法;
commander使用方法參考:https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md
.version 定義工具版本,從package.json文件中讀取version字段值
.usage 說明該命令行工具使用方式
.command 定義子命令,這里定義了一個(gè) init 子命令,通過 pro-cli init 執(zhí)行;
讀過commander使用方法后知道,這里沒有使用.action 定義運(yùn)行子命令要執(zhí)行的動(dòng)作,所以commander會(huì)在bin目錄下搜索?
這個(gè)文件名是根據(jù) 總命令-子命令 這樣的規(guī)則生成,commander會(huì)自動(dòng)尋找該文件。
6. pro-cli.js 同級(jí)目錄添加 pro-cli-init.js 文件。把pro-cli.js作為命令行工具入口文件,pro-cli-init.js作為運(yùn)行init子命令時(shí)執(zhí)行文件。如果在該文件中添加?
這樣的內(nèi)容,然后運(yùn)行 npm link 鏈接到node.js全局模塊目錄后,在終端中運(yùn)行 pro-cli init 命令,就會(huì)執(zhí)行 pro-cli-init.js 文件,打印出該語句。
pro-cli-init.js文件內(nèi)容:
從當(dāng)面目錄下的config.js和utils.js文件中引入了方法,config.js和utils.js文件具體為:


pro-cli-init.js 文件解釋:
從 config.js 中引入了 項(xiàng)目名、框架類型、vue版本和預(yù)設(shè)的git配置4個(gè)問題;
從 utils.js 中引入了判斷目錄是否存在的方法
詢問項(xiàng)目名(作為目錄名),判斷是否存在;
詢問項(xiàng)目使用的框架(vue或者react);
如果選擇了vue,詢問使用2.x還是3.x版本;
根據(jù)選擇的框架獲取預(yù)設(shè)的框架模板所在地址;
拿到git地址后通過 download-git-repo 模塊進(jìn)行下載,下載過程通過 ora 模塊展示loading動(dòng)畫,如果下載模塊出錯(cuò)就終止運(yùn)行;下載成功顯示提示信息。
發(fā)布到 npmjs
發(fā)布到 npmjs.com, 需要到該網(wǎng)站進(jìn)行用戶注冊(cè),然后在編寫的命令行所在目錄下運(yùn)行 npm publish, 會(huì)提示需要先登陸,運(yùn)行 npm adduser 輸入注冊(cè)時(shí)的用戶名和密碼登陸后 npm publish 發(fā)布;可能提示沒有權(quán)限,大概率是因?yàn)閚pmjs.com 已經(jīng)有同名的包了,修改一下package.json中neme值重新publish即可。發(fā)布成功后可以全局安裝該包進(jìn)行測(cè)試。 上面示例全局安裝就是 npm i -g pro-cli,然后運(yùn)行 pro-cli 會(huì)顯示幫助信息。
需要注意的是,如果npm使用了taobao鏡像,需要切換回原npm鏡像,然后再發(fā)布。為方便切換,可安裝nrm。