工作效率upup，一起來實(shí)現(xiàn)一個Node.js-CLI開發(fā)工具吧
前言
我們平時項(xiàng)目開發(fā)中，經(jīng)常會有很多類似的代碼文件，而我們在使用的時候也會經(jīng)常的去復(fù)制粘貼。為此我之前也寫過一篇文章，探討過提高開發(fā)效率的方法，但是說實(shí)話，也并不是很好用。
看如今火熱的前端框架，都有自己的CLI工具，例如Vue CLI，creat-react-app等等，搭建項(xiàng)目十分的方便。所以我也在想，要不也實(shí)現(xiàn)一個CLI工具，不一定要和前面幾個那樣高大上，但只要能提高工作的效率，就值得試一試。
初始化項(xiàng)目
首先，我們要打開CLI界面，用npm初始化一個項(xiàng)目：
npm?init
package.json
{
??"name":?"mycli",
??"version":?"1.0.0",
??"description":?"A?cli-demo",
??"main":?"index.js",
??"author":?"xmanlin",
??"license":?"MIT"
}
里面一些用不上都已經(jīng)去掉。
自定義命令
相信很多小伙伴在使用 npm 初始化項(xiàng)目的時候，或者在用 Vue CLI 搭建項(xiàng)目的時候，會發(fā)現(xiàn)它們有一個共同點(diǎn)——都有自己個性化的命令，感覺有點(diǎn)酷炫。那么我們怎么才能實(shí)現(xiàn)自己的命令呢，很簡單，在 package.json 添加 bin ：
{
??"name":?"mycli",
??"version":?"1.0.0",
??"description":?"A?cli-demo",
??"main":?"index.js",
??"bin":?{
????"mycli":?"./index.js"
??},
??"author":?"xmanlin",
??"license":?"MIT"
}
package.json中的 bin 的作用就是可以讓設(shè)置的 mycli 成為一個可執(zhí)行命令，而命令所執(zhí)行的文件就是后面的 index.js ，這些都可以根據(jù)自己的想法來定。接著我們要繼續(xù)對 index.js 進(jìn)行修改：
index.js
#!/usr/bin/env?node
console.log("執(zhí)行成功")
這里的第一行很重要，這里表明 index.js 是 node 可執(zhí)行文件。
設(shè)置完成后，就可以「全局」安裝我們的CLI工具了:
npm?install?-g
[email protected]
added?1?package?from?1?contributor?in?0.12s
可以看見全局安裝成功，最后我們試試我們的命令：
mycli
輸出：
執(zhí)行成功
交互式命令行
剛剛小伙伴們在進(jìn)行命令行操作的時候，使用了不同選項(xiàng)的命令，例如 npm init 、 npm install -g ，其中包含一些交互式的，比如在初始化項(xiàng)目時， npm init ?提供一些輸入問答形式的命令。接下來，我們就來為自己的CLI工具添加這些類似的命令。
我們可以依賴兩個庫進(jìn)行我們的開發(fā)：commander.js和Inquirer.js
commander.js：完整的 node.js 命令行解決方案。我們可以利用它，快速的編寫我們的命令行，自定義化操作。 Inquirer.js：是常規(guī)交互式命令行用戶接口的集合，提供給 Node.js 一個方便嵌入，漂亮的命令行接口。我們可以用來快速進(jìn)行交互式命令行的編寫。
這兩個庫的具體用法，這里就過多的介紹，小伙伴們可以點(diǎn)擊上面名字的鏈接去熟悉一下，花不了太多時間，實(shí)際用起來也不難，后面那個沒有中文Readme，但是不妨礙大家會搜索呀~對不對。
定義選項(xiàng)
我們首先來實(shí)現(xiàn)類似于 npm -v、node -v這樣類似的命令選項(xiàng)。
首先安裝commander.js：
npm?install?commander
然后引入 commander.js 并對 index.js 進(jìn)行修改
#!/usr/bin/env?node
const?{?program?}?=?require('commander');
//?字符串分割為數(shù)組的方法
function?strToArr(value,?preValue){
????return?value.split(',')
}
//?cli版本
program.version(require('./package').version,?'-v,?--version',?'cli的最新版本');
//?設(shè)置選項(xiàng)
program
????.option('-d,?--debug',?'調(diào)試一下')
????.option('-l,?--list?' ,?'把字符串分割為數(shù)組',?strToArr)
????.action((options,?command)?=>?{
????????//?進(jìn)行邏輯處理
????????if(options.debug)?{
????????????console.log("調(diào)試成功")
????????}
????????if(options.list?!==?undefined)?{
????????????console.log(options.list)
????????}
????});
//?處理命令行輸入的參數(shù)
program.parse(process.argv);
我們來試試剛剛設(shè)置的命令選項(xiàng)：
mycli?-d
輸出：
調(diào)試成功
輸入：
mycli?-l?1,2,3
輸出：
[?'1',?'2',?'3'?]
在commander.js里面已經(jīng)給我們定義好了 --help 選項(xiàng)：
mycli?-h
輸出：
Usage:?index?[options]
Options:
??-v,?--version???????cli的最新版本
??-d,?--debug?????????調(diào)試一下
??-l,?--list???把字符串分割為數(shù)組
??-h,?--help??????????display?help?for?command
利用 --help 選項(xiàng)，我們可以很清楚的了解到 mycli 中已有多少命令。
設(shè)置子命令
在項(xiàng)目開發(fā)中，我們有時會用到類似于 npm run xxx 這樣的命令，其中run就相當(dāng)于npm的子命令。這里我們也可以給mycli設(shè)置類似的子命令：
const?{?program?}?=?require('commander');
...
//?創(chuàng)建文件命令行
program
????.command('create?' )
????.description('創(chuàng)建一個文件')
????.action((filename)?=>?{
????????console.log(filename)
????})
????
...
//?處理命令行輸入的參數(shù)
program.parse(process.argv);
command('create 就是創(chuàng)建了一個 mycli 的 create 子命令，后面跟了一個必填參數(shù)。
輸入：
mycli?create?file
輸出
file
子命令創(chuàng)建成功。
利用命令行創(chuàng)建項(xiàng)目文件
我們現(xiàn)在能夠定義選項(xiàng)，設(shè)置命令了。接下來我們就可以實(shí)際做點(diǎn)東西，利用命令行來創(chuàng)建項(xiàng)目的文件。
簡單的設(shè)計一個流程：
創(chuàng)建模板文件
我們先來創(chuàng)建一個templates文件夾，然后在里面寫幾個常見的模板文件，這里的模板文件運(yùn)用到了模板字符串，結(jié)構(gòu)如下：
reactClass.js
module.exports?=?function?(className)?{
????return?`
import?*?as?React?from?'react';
export?class?${className}?extends?React.Component{
????constructor(props){
????????super(props);
????????this.state?=?{}
????}
????componentDidMount(){
????}
????render()?{
????????return?(
????????????
????????)
????}
}
????`?
}
vueTemplate.js
module.exports?=?function?()?{
????return?`
????
????????
????
????
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>