您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么從零開發(fā)一個(gè)node命令行工具”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
什么是命令行工具?
命令行工具(Cmmand Line Interface)簡(jiǎn)稱cli,顧名思義就是在命令行終端中使用的工具。我們常用的 git 、npm、vim 等都是 cli 工具,比如我們可以通過(guò) git clone 等命令簡(jiǎn)單把遠(yuǎn)程代碼復(fù)制到本地。
為什么要用cli工具?
和 cli 相對(duì)的是圖形用戶界面(gui),windows 環(huán)境中幾乎都是 gui 工具,而 linux 環(huán)境中則幾乎都是 cli 工具,因?yàn)閮烧哂脩舨煌?,gui 側(cè)重于易用,cli 則側(cè)重于效率。對(duì)于熟悉 gui 和集成開發(fā)環(huán)境(IDE)的程序員,這似乎很難理解。畢竟用鼠標(biāo)點(diǎn)點(diǎn)拽拽,不是更方便么?
很遺憾,答案是否定的。gui對(duì)于某些簡(jiǎn)單操作,可能更快、更方便。比如移動(dòng)文件、閱讀郵件或?qū)憌ord文檔。但如果你依賴 gui 完成全部工作,你將會(huì)錯(cuò)過(guò)環(huán)境的某些能力,比如使常見任務(wù)自動(dòng)化,或是利用各種工具的全部功能。并且,你也無(wú)法將工具組合,創(chuàng)建出定制的宏工具。gui 的好處是所見即所得(what you see is what you get)。缺點(diǎn)是所見即全部所得(what you see is all you get)。
作為注重實(shí)效的程序員,你不斷的想要執(zhí)行特別的操作(gui 可能不支持的操作)。當(dāng)你想要快速地組合一些命令,以完成一次查詢或某種其他的任務(wù)時(shí),cli 要更為合適。比如:查看上周哪些js文件沒有改動(dòng)過(guò):
# cli: find . -name '*.js' -mtime +7 -print # gui: 1.點(diǎn)擊并轉(zhuǎn)到"查找文件",點(diǎn)擊"文件名"字段,敲入"*.js",選擇"修改日期"選項(xiàng)卡; 2.然后選擇"介于".點(diǎn)擊"開始日期",敲入項(xiàng)目開始的日期。 3.點(diǎn)擊"結(jié)束日期",敲入1周以前的日期(確保手邊有日歷),點(diǎn)擊"開始查找";
如何開發(fā)一個(gè) cli 工具?
基本上,使用任何成熟的語(yǔ)言都可以開發(fā) cli 工具,作為一個(gè)前端小白,還是 JavaScript 比較順手,因此我們選用 node 作為開發(fā)語(yǔ)言。
創(chuàng)建一個(gè)項(xiàng)目
# 1.創(chuàng)建一個(gè)目錄: mkdir kid-cli && cd kid-cli # 2.因?yàn)樽罱K我們要把cli發(fā)布到npm上,所以需要初始化一個(gè)程序包: npm init # 3.創(chuàng)建一個(gè)index.js文件 touch index.js # 4.打開編輯器(vscode) code .
安裝 code 命令,運(yùn)行 VS code 并打開命令面板( ??P ),然后輸入 shell command 找到: Install 'code' command in PATH 就行了。
打開index.js文件,添加一段測(cè)試代碼:
#!/usr/bin/env node console.log('hello world!’)
終端運(yùn)行 node 程序,需要先輸入 node 命令,比如
node index.js
可以正確輸出 hello world!,代碼頂部的 #!/usr/bin/env node是告訴終端,這個(gè)文件要使用 node 去執(zhí)行。
創(chuàng)建一個(gè)命令
一般 cli都有一個(gè)特定的命令,比如 git,剛才使用的 code 等,我們也需要設(shè)置一個(gè)命令,就叫 kid 吧!如何讓終端識(shí)別這個(gè)命令呢?很簡(jiǎn)單,打開 package.json 文件,添加一個(gè)字段 bin,并且聲明一個(gè)命令關(guān)鍵字和對(duì)應(yīng)執(zhí)行的文件:
# package.json ...... "bin": { "kid": "index.js" }, ......
如果想聲明多個(gè)命令,修改這個(gè)字段就好了。
然后我們測(cè)試一下,在終端中輸入 kid,會(huì)提示:
zsh: command not found: kid
為什么會(huì)這樣呢?回想一下,通常我們?cè)谑褂靡粋€(gè) cli 工具時(shí),都需要先安裝它,比如 vue-cli,使用前需要全局安裝:
npm i vue-cli -g
而我們的 kid-cli 并沒有發(fā)布到 npm 上,當(dāng)然也沒有安裝過(guò)了,所以終端現(xiàn)在還不認(rèn)識(shí)這個(gè)命令。通常我們想本地測(cè)試一個(gè) npm 包,可以使用:npm link 這個(gè)命令,本地安裝這個(gè)包,我們執(zhí)行一下:
npm link
然后再執(zhí)行
kid
命令,看正確輸出 hello world! 了。
到此,一個(gè)簡(jiǎn)單的命令行工具就完成了,但是這個(gè)工具并沒有任何卵用,別著急,我們來(lái)一點(diǎn)一點(diǎn)增強(qiáng)它的功能。
查看版本信息
首先是查看 cli 的版本信息,希望通過(guò)如下命令來(lái)查看版本信息:
kid -v
這里有兩個(gè)問(wèn)題
如何獲取 -v 這參數(shù)?
如何獲取版本信息?
在 node 程序中,通過(guò) process.argv 可獲取到命令的參數(shù),以數(shù)組返回,修改 index.js,輸出這個(gè)數(shù)組:
console.log(process.argv)
然后輸入任意命令,比如:
kid -v -h -lalala
控制臺(tái)會(huì)輸出
[ '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/node', '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/kid', '-v', '-h', '-lalala' ]
這個(gè)數(shù)組的第三個(gè)參數(shù)就是我們想要的 -v。
第二個(gè)問(wèn)題,版本信息一般是放在package.json 文件的 version 字段中, require 進(jìn)來(lái)就好了,改造后的 index.js 代碼如下:
#!/usr/bin/env node const pkg = require('./package.json') const command = process.argv[2] switch (command) { case '-v': console.log(pkg.version) break default: break }
然后我們?cè)賵?zhí)行kid -v,就可以輸出版本號(hào)了。
初始化一個(gè)項(xiàng)目
接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)最常見的功能,利用 cli 初始化一個(gè)項(xiàng)目。
整個(gè)流程大概是這樣的:
cd 到一個(gè)你想新建項(xiàng)目的目錄;
執(zhí)行 kid init 命令,根據(jù)提示輸入項(xiàng)目名稱;
cli 通過(guò) git 拉取模版項(xiàng)目代碼,并拷貝到項(xiàng)目名稱所在目錄中;
為了實(shí)現(xiàn)這個(gè)流程,我們需要解決下面幾個(gè)問(wèn)題:
執(zhí)行復(fù)雜的命令
上面的例子中,我們通過(guò) process.argv 獲取到了命令的參數(shù),但是當(dāng)一個(gè)命令有多個(gè)參數(shù),或者像新建項(xiàng)目這種需要用戶輸入項(xiàng)目名稱(我們稱作“問(wèn)答”)的命令時(shí),一個(gè)簡(jiǎn)單的swith case 就顯得捉襟見肘了。這里我們引用一個(gè)專門處理命令行交互的包:commander。
npm i commander --save
然后改造index.js
#!/usr/bin/env node const program = require('commander') program.version(require('./package.json').version) program.parse(process.argv)
運(yùn)行
kid -h
會(huì)輸出
Usage: kid [options] [command] Options: -V, --version output the version number -h, --help output usage information
commander已經(jīng)為我們創(chuàng)建好了幫助信息,以及兩個(gè)參數(shù) -V 和 -h,上面代碼中的program.version 就是返回版本號(hào),和之前的功能一致,program.parse 是將命令參數(shù)傳入commander 管道中,一般放在***執(zhí)行。
添加問(wèn)答操作
接下來(lái)我們添加 kid init 的問(wèn)答操作,這里有需要引入一個(gè)新的包:inquirer, 這個(gè)包可以通過(guò)簡(jiǎn)單配置讓 cli 支持問(wèn)答交互。
npm i inquirer --save
index.js:
#!/usr/bin/env node const program = require('commander') var inquirer = require('inquirer') const initAction = () => { inquirer.prompt([{ type: 'input', message: '請(qǐng)輸入項(xiàng)目名稱:', name: 'name' }]).then(answers => { console.log('項(xiàng)目名為:', answers.name) console.log('正在拷貝項(xiàng)目,請(qǐng)稍等') }) } program.version(require('./package.json').version) program .command('init') .description('創(chuàng)建項(xiàng)目') .action(initAction) program.parse(process.argv)
program.command 可以定義一個(gè)命令,description 添加一個(gè)描述,在 --help 中展示,action 指定一個(gè)回調(diào)函數(shù)執(zhí)行命令。inquirer.prompt 可以接收一組問(wèn)答對(duì)象,type字段表示問(wèn)答類型,name 指定答案的key,可以在 answers 里通過(guò) name 拿到用戶的輸入,問(wèn)答的類型有很多種,這里我們使用 input,讓用戶輸入項(xiàng)目名稱。
運(yùn)行 kid init,然后會(huì)提示輸入項(xiàng)目名稱,輸入后會(huì)打印出來(lái)。
運(yùn)行 shell 腳本
熟悉 git 和 linux 的同學(xué)幾句話便可以初始化一個(gè)項(xiàng)目:
git clone xxxxx.git --depth=1 mv xxxxx my-project rm -rf ./my-project/.git cd my-project npm i
那么如何在 node 中執(zhí)行 shell 腳本呢?只需要安裝 shelljs 這個(gè)包就可以輕松搞定。
npm i shelljs --save
假定我們想克隆 github 上 vue-admin-template 這個(gè)項(xiàng)目的代碼,并自動(dòng)安裝依賴,改造index.js,在 initAction 函數(shù)中加上執(zhí)行shell腳本的邏輯:
#!/usr/bin/env node const program = require('commander') const inquirer = require('inquirer') const shell = require('shelljs') const initAction = () => { inquirer.prompt([{ type: 'input', message: '請(qǐng)輸入項(xiàng)目名稱:', name: 'name' }]).then(answers => { console.log('項(xiàng)目名為:', answers.name) console.log('正在拷貝項(xiàng)目,請(qǐng)稍等') const remote = 'https://github.com/PanJiaChen/vue-admin-template.git' const curName = 'vue-admin-template' const tarName = answers.name shell.exec(` git clone ${remote} --depth=1 mv ${curName} ${tarName} rm -rf ./${tarName}/.git cd ${tarName} npm i `, (error, stdout, stderr) => { if (error) { console.error(`exec error: ${error}`) return } console.log(`${stdout}`) console.log(`${stderr}`) }); }) } program.version(require('./package.json').version) program .command('init') .description('創(chuàng)建項(xiàng)目') .action(initAction) program.parse(process.argv)
shell.exec 可以幫助我們執(zhí)行一段腳本,在回調(diào)函數(shù)中可以輸出腳本執(zhí)行的結(jié)果。
測(cè)試一下我們初始化功能:
cd .. kid init # 輸入一個(gè)項(xiàng)目名稱
可以看到,cli已經(jīng)自動(dòng)從github上拉取vue-admin-template的代碼,放在指定目錄,并幫我們自動(dòng)安裝了依賴。
“怎么從零開發(fā)一個(gè)node命令行工具”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。