一文学会搭建 cli 脚手架工具

文章目录

  • 设置工具命令
    • package.json bin 字段
    • 注释:#!/usr/bin/env node
    • 设置环境变量
  • 接收命令选项参数
    • process 实现
    • commander
  • 命令行交互:inquirer
  • 下载项目模板:download-git-repo
  • 执行额外命令:自动安装依赖
    • child_process
    • execa
  • 体验优化
    • 输出彩色信息:chalk
    • loading 加载状态提示:ora
    • 控制台输出表格:easy-table
    • 控制台输出方框:boxen
    • 输出 ASCII 的艺术字体:figlet

通过学习搭建脚手架工具,学习 nodejs 开发命令行工具知识。

设置工具命令

以 create-vite 为例,怎么终端就能识别 create-vite 为一个命令呢?并且会执行一些逻辑呢?这些逻辑代码写在哪?

  • 通过 bin 字段。

package.json bin 字段

bin 字段用来设置内部命令,并且指定命令对应的执行文件。

设置一个命令为 ikun,命令行执行 ikun 其实就是执行 main.js 文件。

{"bin": {"ikun": "./src/main.js"}
}

注释:#!/usr/bin/env node

#!/usr/bin/env node 是一个称为 shebang(或 hashbang)的特殊注释,它出现在脚本文件的第一行。这个注释的作用是告诉 Unix 或类 Unix 系统的操作系统,当用户尝试执行这个脚本时,应该使用哪个解释器来运行这个脚本。

在这个例子中,#!/usr/bin/env node 指示系统使用 env 命令来查找 node 解释器,并使用 node 来执行该脚本。env 命令会在系统的环境变量中查找 node 可执行文件,这样可以确保无论 node 安装在哪个目录下,脚本都能正确地运行。

#!/usr/bin/env nodeconsole.log(234);

设置环境变量

学过 Java 都知道,第一步就是设置环境变量,没有设置环境变量,是不能在任意路径下使用 java 命令的。

我们的 ikun 命令自然也是一样的,也需要添加入环境变量。

如果这个包npm publish发布后,用户npm install安装这个包。package.json 中有 bin 字段,就会自动添加入环境变量。用户可直接使用 ikun 命令。

那我们在开发的时候怎么办?
可以使用npm link给这个命令建立一个软连接,连接到全局。这样我们就能像全局安装了这个包一样,能全局直接用了。

# 建立连接
npm link --global# 断开连接,也是全局删除这个包
npm unlink cli-demo --global

npm uninstall 文档中可以发现,unlink 其实是 uninstall 的别名,实质上也是删除了包。

pnpm link | pnpm中文文档 | pnpm中文网
pnpm unlink | pnpm中文文档 | pnpm中文网

# 建立连接
pnpm link --global# 断开连接(其实就是全局卸载这个包)
pnpm uninstall --global cli-demo

接收命令选项参数

命令通常可以接收一些选项参数 options。比如几乎所有命令都有的一个版本。

  • java --version

并且选项还可以添加一些参数,如 git 提交 -m 选项后填写参数,作为提交说明:

  • git add -m "第一次提交"

我们的 ikun 命令怎么实现这个?

  • 原生实现
  • 第三方库:commander

process 实现

process 全局对象

#!/usr/bin/env node
const package = require("../package.json");const option = process.argv[2];if (option === "-v" || option === "--version") {// package.json 会自动解析为 js 对象console.log(package.version);
}

CommonJS 能直接解析 JSON 文件,但是 ESM 不可以,目前只是实验性支持:断言类型为 JSON

import packageModule from "../../package.json" assert { type: "json" };import("../../package.json", { assert: { type: "json" } }).then(({ default: packageModule }) => {});

(node:8072) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time

因此 node 中处理 JSON 文件,最好的办法还是通过 fs 模块 IO 将 JSON 文件内容读取为字符串,然后 JSON.parse。

import fs from "fs";
import { resolve, dirname } from "path";
import { fileURLToPath } from "url";const packageJsonUrl =  resolve(dirname(fileURLToPath(import.meta.url)), "../../package.json"))
const packageJsonStr = fs.readFileSync(packageJsonUrl, "utf-8");
const packageModule = JSON.parse(packageJsonStr);

这样原生是可以实现,但是太麻烦了。

commander

commander

实现类似 vue-cli 的效果:
命令行输入ikun create 项目名,就会在该目录下生成一个 vue 项目模板。

const { program } = require('commander')function helpOptions() {// 1.处理--version的操作const version = require('../../package.json').versionprogram.version(version, '-v --version')// 2.增强其他的options的操作program.option('-w --why', "a why cli program~")program.option('-d --dest <dest>', 'a destination folder, 例如: -d src/components')program.on('--help', () => {console.log("")console.log("others:")console.log("  xxx")console.log("  yyy")})
}module.exports = helpOptions
const { program } = require('commander')
const { createProjectAction, addComponentAction } = require('./core/actions')
const helpOptions = require('./core/help-options')// 1.配置所有的options
helpOptions()// 2.增加子命令实现具体功能
program.command("create <project> [...others]").description("create vue project into a folder, 比如: whycli create airbnb").action(createProjectAction)program.command("addcpn <cpnname> [...others]").description("add vue component into a folder, 比如: whycli addcpn NavBar -d src/components").action(addComponentAction)// 让commander解析process.argv参数
program.parse(process.argv)

命令行交互:inquirer

命令行交互,比如执行命令后,一问一答询问你项目名要填什么,是否要支持 ts 等等。

inquirer 、enquirer、prompts。这三个库都可以处理复杂的用户输入,完成命令行输入交互。

Inquirer 是一个强大的命令行交互工具,用于与用户进行交互和收集信息。它提供了各种丰富的交互式提示(如输入框、选择列表、确认框等),可以帮助你构建灵活的命令行界面。通过 Inquirer,你可以向用户提出问题,获取用户的输入,并根据用户的回答采取相应的操作。

Inquirer.js 提供了一系列的预设问题类型,包括:

  • 输入(Input):让用户输入一些文本。
  • 确认(Confirm):让用户回答是或否的问题。
  • 列表(List):让用户从列表中选择一个选项。
  • 检查框(Checkbox):让用户从多个选项中选择多个。
  • 扩展列表(Expand):让用户通过键盘快捷键从多个选项中选择一个。
  • 密码(Password):让用户输入密码,输入时字符会被隐藏。

以下是一个使用 Inquirer.js 的简单示例:
在这个示例中,Inquirer.js 会依次显示三个问题,并根据用户的回答存储在 answers 对象中。

import inquirer from "inquirer";async function promptQuestions() {let answers;try {answers = await inquirer.prompt([// ... questions{type: "input",name: "username",message: "请输入您的用户名:"},{type: "confirm",name: "isVIP",message: "您是VIP用户吗?",default: false},{type: "list",name: "plan",message: "请选择您的计划:",choices: ["Free", "Professional", "Enterprise"],filter: function (val) {return val.toLowerCase();}}]);console.log(JSON.stringify(answers, null, "  "));} catch (error) {if (error.isTtyError) {console.log("Prompt couldn't be rendered in the current environment");} else {console.log("Something else went wrong");}}return answers;
}export default promptQuestions;// {
//   "username": "hh",
//   "isVIP": false,
//   "plan": "professional"
// }

下载项目模板:download-git-repo

本地生成的 vue 项目模块其实 glt clone 下来的,并不是本地生成的。这样的好处就是,模板在 github 上,我可以实时更新,但是命令行工具代码不用变。

去 github clone 项目的操作没必要自己实现,使用第三方库即可。

Phillip Lanclos / download-git-repo · GitLab

Download-git-repo 是一个用于下载 Git 仓库的 npm 库。它提供了一个简单的接口,可以方便地从远程 Git 仓库中下载项目代码。你可以指定要下载的仓库和目标目录,并可选择指定分支或标签。Download-git-repo 支持从各种 Git 托管平台(如 GitHub、GitLab、Bitbucket 等)下载代码。

download-git-repo

const VUE_REPO = "direct:https://github.com/coderwhy/vue3_template.git#main"module.exports = {VUE_REPO
}
async function createProjectAction(project) {try {// 1.从编写的项目模板中clone下来项目await download(VUE_REPO, project, { clone: true })// 2. 模板下载好后,给予一些提示,比如进入项目,下载依赖等console.log(`cd ${project}`)console.log(`npm install`)console.log(`npm run dev`)} catch (error) {console.log("github连接失败, 请稍后重试")}
}

执行额外命令:自动安装依赖

下载好项目模板后,可以继续帮用户自动执行npm install下载好依赖。

当前 node 主线程正在执行我们的 ikun 命令,此时又要执行 npm 命令。因此我们需要在 node 中开一个子进程。

https://www.yuque.com/ahcheng123/project/dbhhnl6sxm7zgwmw#Ym8tS

child_process

子进程 childProcess

const { spawn } = require('child_process')function execCommand(...args) {return new Promise((resolve) => {// npm install/npm run dev// 1.开启子进程执行命令const childProcess = spawn(...args)// 2.获取子进程的输出和错误信息childProcess.stdout.pipe(process.stdout)childProcess.stderr.pipe(process.stderr)// 3.监听子进程执行结束, 关闭掉childProcess.on('close', () => {resolve()})})
}module.exports = execCommand

要执行 npm 命令要注意,不同平台执行的实际命令不同。

  • win:npm.cmd
  • mac: npm
  • linux: npm
async function createProjectAction(project) {try {// 1.从编写的项目模板中clone下来项目await download(VUE_REPO, project, { clone: true })// 2.很多的脚手架, 都是在这里给予提示// 3.帮助执行npm installconsole.log(process.platform)const commandName = process.platform === 'win32'? 'npm.cmd': 'npm'await execCommand(commandName, ["install"], { cwd: `./${project}` })// 4.帮助执行npm run devawait execCommand(commandName, ["run", "dev"], { cwd: `./${project}` })} catch (error) {console.log("github连接失败, 请稍后重试")}
}

至此,其实一个 cli 工具的主体功能基本完成了。

execa

https://github.com/sindresorhus/execa?tab=readme-ov-file

Execa 是一个流行的 Node.js 库,它提供了一种更简单、更现代的方式来执行子进程。它对 Node.js 原生的 child_process 模块进行了封装,提供了一系列的改进和额外功能,使得执行外部命令更加方便和可靠。

Execa 的主要特点包括:

  1. 清晰的 API:Execa 提供了简洁明了的 API,使得执行命令和获取输出变得更加简单。
  2. 跨平台支持:它能够在不同的操作系统上提供一致的表现,例如在 Windows 上正确处理路径和扩展名。
  3. 流式输出:Execa 支持流式输出,这意味着你可以实时地获取命令的输出,而不是等到命令执行完毕后一次性获取。
  4. Promise-based:Execa 使用 Promise,使得异步操作更加易于管理和组合。
  5. 改进的错误处理:它能够提供更详细的错误信息,包括命令的退出码和信号。
  6. 同步模式:除了默认的异步模式外,Execa 还支持同步执行命令。
    以下是一个使用 Execa 执行命令的简单示例:

Execa 支持交互式命令,你可以使用 stdio: ‘inherit’ 将子进程的输入/输出/错误传递给父进程:

const execa = require('execa');async function runInteractiveCommand() {try {await execa('git', ['commit'], { stdio: 'inherit' });} catch (error) {console.error('命令执行出错:', error);}
}runInteractiveCommand();

Execa 是许多现代 Node.js 应用程序的流行选择,特别是那些需要频繁与系统命令交互的应用程序,例如构建工具、测试框架和开发工具等。

import { execa } from "execa";/*** 执行命令* @param {string} command — The program/script to execute.* @param {string[]} args — Arguments to pass to file on execution.* @param {*} options*/
export async function execCommand(command, args) {try {await execa(command, args, { stdio: "inherit" });} catch (error) {console.log("error", error);}
}

体验优化

输出彩色信息:chalk

  • https://github.com/chalk/chalk

使用 console.log 输出提示信息太丑了,使用第三方库 chalk 可以输出彩色的控制台信息。

搭建 ts koa 项目模板

import chalk from "chalk";// 定义主题和对应的 emoji
const theme = {info: { color: chalk.blue, emoji: " 💡 " },success: { color: chalk.green, emoji: " 🎉 " },warning: { color: chalk.yellow, emoji: " 🔔 " },error: { color: chalk.red, emoji: " 🚨 " },debug: { color: chalk.gray, emoji: " 🔍 " },highlight: { color: chalk.bold, emoji: " 🌟 " }
};// 日志工具方法
const logInfo = message => console.log(`${theme.info.emoji}${theme.info.color(message)}`);
const logSuccess = message => console.log(`${theme.success.emoji}${theme.success.color(message)}`);
const logWarning = message => console.log(`${theme.warning.emoji}${theme.warning.color(message)}`);
const logError = message => console.log(`${theme.error.emoji}${theme.error.color(message)}`);
const logDebug = message => console.log(`${theme.debug.emoji}${theme.debug.color(message)}`);
const logHighlight = message => console.log(`${theme.highlight.emoji}${theme.highlight.color(message)}`);// 导出方法
export { logInfo, logSuccess, logWarning, logError, logDebug, logHighlight };

loading 加载状态提示:ora

  • https://github.com/sindresorhus/ora

Ora 是一个用于在命令行界面显示加载动画的 npm 库。它可以帮助你在执行耗时的任务时提供一个友好的加载状态提示。Ora 提供了一系列自定义的加载动画,如旋转器、进度条等,你可以根据需要选择合适的加载动画效果,并在任务执行期间显示对应的加载状态。

在这里插入图片描述

控制台输出表格:easy-table

  • https://github.com/eldargab/easy-table
var Table = require('easy-table')var data = [{ id: 123123, desc: 'Something awesome', price: 1000.00 },{ id: 245452, desc: 'Very interesting book', price: 11.45},{ id: 232323, desc: 'Yet another product', price: 555.55 }
]var t = new Tabledata.forEach(function(product) {t.cell('Product Id', product.id)t.cell('Description', product.desc)t.cell('Price, USD', product.price, Table.number(2))t.newRow()
})console.log(t.toString())
Product Id  Description            Price, USD
----------  ---------------------  ----------
123123      Something awesome         1000.00
245452      Very interesting book       11.45
232323      Yet another product        555.55

控制台输出方框:boxen

  • https://github.com/sindresorhus/boxen

Boxen 是一个轻量级的 Node.js 库,用于将文本内容格式化为带框的文本,通常用于美化命令行输出。它可以将文本包裹在固定的宽度中,并在文本周围添加边框,使得输出更加整洁和易于阅读。
使用 Boxen,你可以轻松地创建各种形状和大小的框,包括单行和多行的文本。Boxen 支持多种边框样式,并且可以根据需要调整边框、填充和间距等样式属性。

import boxen from 'boxen';console.log(boxen('unicorn', {padding: 1}));
/*
┌─────────────┐
│             │
│   unicorn   │
│             │
└─────────────┘
*/console.log(boxen('unicorn', {padding: 1, margin: 1, borderStyle: 'double'}));
/*╔═════════════╗║             ║║   unicorn   ║║             ║╚═════════════╝*/console.log(boxen('unicorns love rainbows', {title: 'magical', titleAlignment: 'center'}));
/*
┌────── magical ───────┐
│unicorns love rainbows│
└──────────────────────┘
*/

输出 ASCII 的艺术字体:figlet

  • https://github.com/patorjk/figlet.js

很多库都有这样的标题,比如 spring。

figlet.text("Boo!",{font: "Ghost",horizontalLayout: "default",verticalLayout: "default",width: 80,whitespaceBreak: true,},function (err, data) {if (err) {console.log("Something went wrong...");console.dir(err);return;}console.log(data);}
);
.-. .-')                            ,---.
\  ( OO )                           |   |;-----.\  .-'),-----.  .-'),-----. |   || .-.  | ( OO'  .-.  '( OO'  .-.  '|   || '-' /_)/   |  | |  |/   |  | |  ||   || .-. `. \_) |  |\|  |\_) |  |\|  ||  .'| |  \  |  \ |  | |  |  \ |  | |  |`--'| '--'  /   `'  '-'  '   `'  '-'  '.--.`------'      `-----'      `-----' '--'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于卷积神经网络的野外可食用植物分类系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 本文详细探讨了一基于深度学习的可食用植物图像识别系统。采用TensorFlow和Keras框架&#xff0c;利用卷积神经网络&#xff08;CNN&#xff09;进行模型训练和预测&#xff0c;并引入迁移学习模型…

Mac测试环境搭建

1 下载pycharm 下载地址&#xff1a;PyCharm&#xff1a;JetBrains 出品的用于数据科学和 Web 开发的 Python IDE 2 安装python3.6.8 下载地址&#xff1a;Index of /ftp/python/3.6.8/ 安装后提示错误 换一种方式&#xff1a;用conda 下载地址&#xff1a;Free Download | …

ipad协议847最新版

ipad协议其实就是模拟ipad端微信的人工操作&#xff0c;跟微信服务器通信。协议的关键点主要是PB协议、mmtls、07加密算法、rqt算法、aes加密、rsa加密等&#xff0c;只要把这些点拿下&#xff0c;就可以模拟官方微信的所有功能了&#xff0c;还可以模拟android、pc、mac端的登…

数字音频工作站(DAW)fl studio 21 for mac 21.2.3.3586中文版图文安装教程

随着音乐制作行业的不断发展&#xff0c;越来越多的音乐人和制作人开始使用数字音频工作站&#xff08;DAW&#xff09;来创作和制作音乐。其中FL Studio 21是一个备受欢迎的选择&#xff0c;因为它提供了强大的音乐制作工具和易于使用的界面。 然而&#xff0c;一直以来&…

2024 RubyMine 激活,分享几个RubyMine 激活的方案

文章目录 RubyMine 公司简介我这边使用RubyMine 的理由RubyMine 2023.3 最新变化AI Assistant 正式版对 AI 生成名称建议的支持改进了 Ruby 上下文单元测试生成 RailsRails 应用程序和引擎的自定义路径Rails 路径的自动导入对存储在默认位置之外的模型、控制器和邮件器的代码洞…

Python数据分析实验一:Python数据采集与存储

目录 一、实验目的与要求二、实验过程三、主要程序清单和运行结果1、爬取 “中国南海网” 站点上的相关信息2、爬取天气网站上的北京的历史天气信息 四、程序运行结果五、实验体会 一、实验目的与要求 1、目的&#xff1a; 理解抓取网页数据的一般处理过程&#xff1b;熟悉应用…

基于Redis自增实现全局ID生成器(详解)

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P48 - P49 目录 全局ID生成器介绍 基于Redis自增实现全局ID 实现代码 全局ID生成器介绍 背景介绍 当用户在抢购商品时&#xff0c;就会生成订单并保存到数据库的某一张表中&#…

day12_SpringCloud(Gateway,Nacos配置中心,Sentinel组件)

文章目录 1 Gateway组件1.1 Gateway简介1.2 Gateway入门1.3 网关路由流程图1.4 路由工厂1.5 过滤器1.5.1 过滤器简介1.5.2 内置过滤器1.5.3 路由过滤器1.5.4 默认过滤器1.5.5 全局过滤器1.5.6 过滤器执行顺序 2 Nacos配置中心2.1 统一配置管理2.2 Nacos入门2.2.1 Nacos中添加配…

多线程多进程

秋招面试的java八股文知识点补充以及iot 这里有一点阅读补充 线程和进程区别 什么是进程? 进程 (Process) 是计算机中的一个独立执行单元&#xff0c;是操作系统资源分配的基本单位每个进程有各自独立的内存空间和资源&#xff0c;它们之间相互独立&#xff0c;相互之间不能…

在ubuntu上使用vscode+gcc-arm-none-eabi+openocd工具开发STM32

文章目录 所需工具安装调试搭建过程中遇到的问题 写在前面 老大上周让我用vscode开发STM32&#xff0c;我爽快的答应了&#xff0c;心想大学四年装了这么多环境了这不简简单单&#xff0c;更何况vscode这两年还用过&#xff0c;然而现实总是令人不快的——我竟然花了差不多两周…

第三百九十回

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何把异步的CallBack转换成事件流"相关的内容&#xff0c;本章回中将介绍如何延时处理数据.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介…

new;getline();重载<<和>>

面向对象程序设计的优点&#xff1a; 易维护易扩展模块化&#xff1a;通过设置访问级别&#xff0c;限制别人对自己的访问&#xff0c;保护了数据安全 int main(){ return 0;} 返回值0在windows下编程一般没用&#xff0c;但是在linux中编程&#xff0c;返回值有时有用 汇编与…

在Leaflet中使用Turf.js生成范围多边形的两种实现方式

目录 前言 一、场景需求 1、Leaflet.js的不足 2、Turf.js 二、原始数据展示 1、点位数据展示 2、定义样式 3、定位数据初始化 三、Turfjs中bbox生成 1、官网讲解 2、轨迹bbox生成 四、Turfjs生成外包多边形 1、官网例子 2、凸多边形生成 总结 前言 在一些共享出…

德人合科技|天锐绿盾加密软件——数据防泄漏系统

德人合科技是一家专注于提供企业级信息安全解决方案的服务商&#xff0c;提供的天锐绿盾加密软件是一款专为企业设计的数据安全防护产品&#xff0c;主要用于解决企事业单位内部敏感数据的防泄密问题。 www.drhchina.com PC端&#xff1a; https://isite.baidu.com/site/wjz012…

spring-cloud-openfeign 3.0.0之前版本(对应spring boot 2.4.x之前版本)feign配置加载顺序

在之前写的文章配置基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136060312 下图为自己整理的

正则表达式 || 遇到字符串里面有() 就在括号后面换行

<template><div class"vertical-layout"><header><h1>testPage</h1><p>(1)第一行内容xxxxxxxxx&#xff08;2&#xff09;第二行内容xxxxxxx(3)第三行内容</p></header><main><el-button click"goToO…

Matlab|2机5节点牛拉法(含报告)

目录 主要内容 下载链接 主要内容 采用牛拉法计算2机5节点的潮流计算程序&#xff0c;程序迭代稳定&#xff0c;运行可靠&#xff0c;含报告资料。 下载链接

错误和异常之标准异常创建异常

标准异常 表 10.2 列出了所有的 Python 当前的标准异常集,所有的异常都是内建的. 所以它们在脚本启动 前或在互交命令行提示符出现时已经是可用的了. 表10.2 Python内建异常 异常名称描述所有异常的基类 python 解释器请求退出 用户中断执行(通常是输入^C) 常规错误的基类

Flutter使用auto_updater实现windows/mac桌面应用版本升级功能

因为windows应用一般大家都是从网上下载的&#xff0c;后期版本肯定会更新&#xff0c;那用flutter开发windows应用&#xff0c;怎么实现应用内版本更新功能了&#xff1f;可以使用auto_updater库&#xff0c; 这个插件允许 Flutter 桌面 应用自动更新自己 (基于 sparkle 和 wi…

#onenet网络请求http(GET,POST)

参考博文&#xff1a; POST: https://blog.csdn.net/qq_43350239/article/details/104361153 POST请求&#xff08;用串口助手测试&#xff09;&#xff1a; POST /devices/1105985351/datapoints HTTP/1.1 api-key:AdbrV5kCRsKsRCfjboYOCVcF9FY Host:api.heclouds.com Con…