站長(zhǎng)資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

本篇文章手把手帶大家了解一個(gè)node實(shí)戰(zhàn),聊聊怎么基于node制作一個(gè)mycli命令行工具/腳手架,希望對(duì)大家有所幫助!

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

初始化

首先要確保電腦上有node.js的環(huán)境

命令行執(zhí)行下面代碼,初始化一個(gè)package.json文件

npm init -y

此時(shí),命令行執(zhí)行mycli 肯定會(huì)報(bào)錯(cuò)。

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

配置自定義命令

package.json 添加bin字段,關(guān)聯(lián)mycli命令

  • 每一條命令對(duì)應(yīng)一個(gè)可執(zhí)行文件
  "bin": {     "mycli": "./test.js"   },
  • 新建 /test.js文件
console.log("mycli命令執(zhí)行成功");
  • 需要install安裝命令,但是項(xiàng)目還沒有發(fā)布到npm,所以暫時(shí)先用npm link命令,把mycli命令關(guān)聯(lián)到全局。

此時(shí)命令行再執(zhí)行 mycli就不會(huì)再報(bào)錯(cuò)。

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

腳本配置

test.js文件:

console.log("mycli命令執(zhí)行成功");

然后再執(zhí)行 mycli,此時(shí)會(huì)出現(xiàn)一個(gè)提示錯(cuò)誤的彈窗

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

這是因?yàn)椋瑘?zhí)行mycli命令的時(shí)候相當(dāng)于讓計(jì)算機(jī)執(zhí)行了這個(gè)文件,而計(jì)算機(jī)系統(tǒng)是無法直接執(zhí)行js文件的,這就需要我們?cè)谀_本代碼第一行加入一個(gè)配置,指定計(jì)算機(jī)上的node.js程序來執(zhí)行這個(gè)js腳本文件。

#!/usr/bin/env node

由于更改了執(zhí)行環(huán)境,需要?jiǎng)h除之前l(fā)ink到的文件,文件位置可能是C:Program Filesnodejsnode_modules,找到mycli刪除,然后再重新執(zhí)行npm link

現(xiàn)在控制臺(tái)再來執(zhí)行mycli,可以看到控制臺(tái)正確打印。

相關(guān)工具包的使用

  • Chalk 命令行輸出五顏六色的字體
  • Ora 加載中l(wèi)oading的效果,類似的還有progress庫(kù)
  • commander 設(shè)計(jì)命令
  • inquirer 交互功能(如:提問…)

Chalk

  • 安裝
npm install chalk@4.1.2 -S
  • 使用 test.js
const chalk = require("chalk");  // chalk // const hello = chalk.red("hello"); // const hello = chalk.blue.bgRed("hello"); // const hello = chalk.blue.bgYellow("hello"); const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello"); console.log(hello);

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

Ora

  • 安裝
npm install ora@4.0.3 -S
  • 使用 test.js
const ora = require("ora");  // ora const spinner = ora({   text: "安裝中..." }); spinner.start(); setTimeout(() => {   // spinner.stop();   spinner.succeed("安裝成功");   // console.log("安裝成功"); }, 2000)
  • 常用api
    • start 開始加載
    • stop 停止加載
    • succeed 結(jié)束加載并帶有成功的樣式

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

commander

開發(fā)中經(jīng)常使用的命令,如vue -V git --version vue create等命令,想要實(shí)現(xiàn)這樣的命令需要用到commander這個(gè)庫(kù)。

使用的命令后面帶的-V --help 等,可以理解為是命令的參數(shù),那么我們就需要獲取到這些參數(shù),通過判斷參數(shù)的不同來處理不同的事件。

那在node環(huán)境中,可以通過process.argv來獲取到這個(gè)參數(shù)。而commander庫(kù),幫助我們封裝好了一些方法,不用我們自己去判斷用戶輸入攜帶的指令是什么。

  • 安裝
npm install commander@8.2.0 -S
  • 使用
const commander = require("commander"); // ... commander.parse(process.argv); // 放在后面

安裝完成之后,commander會(huì)自動(dòng)提供給我們一些命令,如--help,下面來測(cè)試一下:

mycli --help
  • 提供了設(shè)置版本號(hào)的方法
commander.version("1.0.0");

執(zhí)行 mycli -V可以看到控制臺(tái)打印了 1.0.0版本號(hào)。

自定義指令方法

commander.option(指令名, 描述, 回調(diào)函數(shù))

  • 把上面寫過的一些功能配置到--init指令:
commander.option("--init", "this is init", () => {   // chalk   // const hello = chalk.red("hello");   // const hello = chalk.blue.bgRed("hello");   // const hello = chalk.blue.bgYellow("hello");   const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");   console.log(hello);    // ora   const spinner = ora({     text: "安裝中..."   });   spinner.start();   setTimeout(() => {     // spinner.stop();     spinner.succeed("安裝成功");     // console.log("安裝成功");   }, 1000) })

現(xiàn)在執(zhí)行mycli --init測(cè)試:

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

  • 在指令中傳遞參數(shù)的寫法
commander.option("--number <num>", "log a number", (num) => {   console.log(num); })

<參數(shù)名>表示必傳的參數(shù),[參數(shù)名]表示非必傳的參數(shù)??刂婆_(tái)輸入mycli --number 100回車,可以看到會(huì)輸出100。

自定義命令方法

commander.command("create <projectName>").action((projectName)=>{   console.log(projectName); })

執(zhí)行 mycli create xx 回車,控制臺(tái)可以看到 輸出了xx。

查看幫助

執(zhí)行 mycli --help,可以看到我們剛才配置的指令和命令都出現(xiàn)在了幫助列表里。

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

inquirer

  • 安裝
npm install inquirer -S
  • prompt提問的方法
  inquirer.prompt([     {       type: "input",       name: "username",       message: "請(qǐng)輸入用戶名:"     }   ]).then((answer)=>{    })

type表示問題的類型,取值可能是:input, number, password, editor等。

answer{username: 輸入的值}

  • type是輸入類型的 input
const inquirer = require("inquirer");  commander.command("add user").action(() => {   inquirer.prompt([     {       type: "input",       name: "username",       message: "請(qǐng)輸入用戶名:"     }   ]).then((answer) => {     console.log(answer);   }) })
  • type是判斷類型的 confirm
commander.command("testcon").action(() => {   inquirer.prompt([     {       type: "confirm",       name: "age",       message: "是否大于18歲?"     }   ]).then((answer) => {     console.log(answer);   }) })

輸入yn來進(jìn)行判斷。

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

  • type是單選類型 list
commander.command("testlist").action(() => {   inquirer.prompt([     {       type: "list",       name: "lib",       message: "選擇用到的框架:",       choices: [         "vue2",         "vue3",         "react",         "svelte",       ]     }   ]).then((answer) => {     console.log(answer);   }) })

執(zhí)行 mycli testlist 命令:

node實(shí)戰(zhàn)之開發(fā)一個(gè)mycli命令行工具

下載模板

  • download-git-repo是一個(gè)拉取代碼的工具。

  • 安裝

npm install download-git-repo@3.0.2 -S
  • 使用
const downgit = require("download-git-repo");  downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {     console.log(err) })

downgit方法里面的第一個(gè)參數(shù)理解為在github上面下載kongcodes用戶的vue3-vant項(xiàng)目模板。第二個(gè)參數(shù)downUrl 為要將模板下載到什么目錄下。第三個(gè)參數(shù)clone 是否要用git clone下載。第四個(gè)參數(shù) 為下載完成執(zhí)行的一些事情。

  • 結(jié)合command方法使用
commander.command("create <projectName>").action((projectName) => {   const spinner = ora({     text: "正在下載https://github.com/kongcodes/vue3-vant..."   });   spinner.start();   fs.mkdirSync(`./${projectName}`);   const downUrl = `${process.cwd()}\${projectName}`;   downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {     if (err) throw err;     spinner.stop();     console.log(chalk.green("downgit success"));   }) })

執(zhí)行 mycli create pro 回車,會(huì)在當(dāng)前目錄下創(chuàng)建pro目錄,下載vue3-vant模板到這個(gè)目錄里。

代碼地址

https://github.com/kongcodes/mycli

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
久久久无码精品亚洲日韩软件| 依依成人精品视频在线观看| 亚洲av日韩av天堂影片精品| 久久久久成人精品无码| 日韩在线视频免费| 国产精品玩偶在线观看| 国产成人精品18| 91精品国产综合久久香蕉| 亚洲精品不卡视频| 国产成人午夜精品影院游乐网| 人妻少妇精品视频一区二区三区 | 亚洲国产日韩一区高清在线| 亚洲youwu永久无码精品| 精品亚洲AV无码一区二区| 人妻少妇精品中文字幕av蜜桃| 久久只有这里的精品69| 国内精品久久人妻互换 | 天天拍夜夜添久久精品| 99热亚洲色精品国产88| 久久精品aⅴ无码中文字字幕重口 久久精品a亚洲国产v高清不卡 | 国内精品伊人久久久久| 少妇人妻偷人精品一区二区 | 51精品国产人成在线观看| 99久久免费中文字幕精品| 99精品视频免费| 99精品国产99久久久久久97| 亚洲视频在线精品| 亚洲精品A在线观看| 无码乱码观看精品久久| 日韩精品一二三区| 青娱乐国产精品视频| 日韩高清中文字幕| www国产亚洲精品久久久日本| 亚洲AV日韩综合一区| 麻豆va在线精品免费播放| 日韩在线观看一区二区三区| 人妻偷人精品成人AV| 免费在线观看日韩| 伊人精品视频在线| 亚洲人成电影网站国产精品| 久久久精品国产Sm最大网站|