从0-1实现一个前端脚手架

https://gitee.com/childe-jia/kfc-cli.git
gitee完整地址

介绍

为什么需要脚手架?

脚手架本质就是一个工具,作用是能够让使用者专注于写代码,它可以让我们只用一个命令就生成一个已经配置好的项目,而不用我们再花时间去配置和安装相关依赖,可以在很大程度上提升我们的开发效率。比如我们常用的create-vuecreate-react-app就是脚手架,很多大厂也都有自己的脚手架。

一个脚手架应该具备哪些功能?

我们以vue官方的脚手架create-vue为例来分析下一个脚手架应该具备哪些功能?

  1. 运行命令创建项目

    npm create vue@latest
    
  2. 用户根据自己需要选择一些配置项

在这里插入图片描述

  1. 根据选择的配置项会生成一个模版项目

在这里插入图片描述

通过分析create-vue,我们可以知道,一个脚手架如果想要创建一个项目,最少要有以下两点功能:

  1. 可以通过命令行和用户交互
  2. 根据交互的结果去生成对应的模版项目

脚手架实现

初始化项目
  1. 执行如下初始化命令
mkdir kfc-vme50
➜ cd kfc-vme50
➜ npm init -y
  1. 在根目录下创建bin/index.js文件作为入口文件,并添加如下代码
#!/usr/bin/env node
console.log('肯德基疯狂星期四v我50')
  1. 在package.json中添加bin字段
"bin": {"kfc-vme50": "/bin/index.js"
}
  1. 在根目录下执行npm link将项目链接到本地环境,就可以实现kfc-vme50命令全局调用
  2. 运行kfc-vme50并查看控制台输出

在这里插入图片描述

相关依赖

实现一个脚手架,通常会用到以下依赖包

  • commander:命令行处理工具
#!/usr/bin/env node// #! 是shebang的标识,告诉操作系统这是一个脚本文件。
// /usr/bin/env 是一个程序,用来查找环境变量中定义的程序路径。在这个例子中,它用来查找node的路径。
// node 是Node.js的可执行文件名,它是运行JavaScript代码的运行时环境。// 它用于处理命令行参数;
const { program } = require("commander");/***  .name 命令名称出现在帮助中,也用于定位独立的可执行子命令。*  .usage 通过这个选项可以修改帮助信息的首行提示*/program.name("kfc-creat").usage("<command> [option]");/*** 「选项」 定义选项* 使用.option()方法来定义选项,同时可以附加选项的简介。每个选项可以定义一个短选项名称(-后面接单个字符)*    一个长选项名称(--后面接一个或多个单词),使用逗号、空格或|分隔。*    有两种最常用的选项,一类是 boolean 型选项,选项无需配置参数,*    另一类选项则可以设置参数(使用尖括号声明在该选项后,如--expect <value>)。*    如果在命令行中不指定具体的选项及参数,则会被定义为undefined*/program.option("-d, --debug", "output extra debugging").option("-s, --small", "small pizza size").option("-p, --pizza-type <type>", "flavour of pizza");/*** 「命令」 通过.command()或.addCommand()可以配置命令,* .command()的第一个参数为命令名称。命令参数可以跟在名称后面,也可以用.argument()单独指定。* 参数可为必选的(尖括号表示)、可选的(方括号表示)或变长参数(点号表示,如果使用,只能是最后一个参数)。* ----------------------------------------------------------------* description 出现在命令的帮助中。* action 命令触发后的回调函数 [命令行的参数]*/program.command("clone <source> [destination]").description("clone a repository into a newly created directory").action((source, destination) => {console.log("clone command called");console.log(source, destination);});/** * 「parse」解析摩命令行参数* program.parse 它的作用是解析 process.argv 数组,将命令行参数转换为可操作的对象。* process.argv 是 Node.js 中的一个全局变量,它是一个数组,包含了命令行启动脚本时传递给 Node.js 进程的参数。数组的第一个元素 process.argv[0] 总是 node, 表示 Node.js 可执行文件的路径 (安装路径)接下来的元素是脚本文件的路径,即你正在运行的 JavaScript 文件的路径。之后的元素是传递给脚本的命令行参数
*/
program.parse(process.argv);/*** 「opts」获取命令行参数* 解析后的选项可以通过Command对象上的.opts()方法获取,同时会被传递给命令处理函数。*/
const options = program.opts();
console.log(options);console.log("肯德基疯狂星期四v我500");
  • chalk:命令行输出美化工具
#!/usr/bin/env node// 重要提示:Chalk 5 部分是 ESM。如果您想将 Chalk 与 TypeScript 或构建工具一起使用,您现在可能需要使用 Chalk 4/**
ESM 是 "ECMAScript Module" 的缩写,它指的是一种 JavaScript 模块的规范,允许开发者将代码分割成可重用的模块。
ESM 是现代 JavaScript 的一个特性,它支持静态模块的导入和导出,这意味着模块的依赖关系可以在编译时就确定下来,从而提高代码的加载和执行效率。
然而,ESM 也有它的限制,比如它不支持 CommonJS 模块中的 require() 函数,而是使用 import() 来动态加载模块。
此外,ESM 需要在支持 ESM 的环境中使用,比如现代浏览器或者使用 Babel 等工具转换的 Node.js 环境。*/const chalk = require("chalk");// 颜色
console.log(chalk.yellow("Welcome"));
// 加粗
console.log(chalk.red.bold("Welcome"));
// 背景色
console.log(chalk.yellow.bold.bgBlue("Welcome"));
  • inquirer:命令行交互工具
#!/usr/bin/env node
/*** !警告] Inquirer v9 及更高版本是本机 esm 模块,* 这意味着您不能再使用 commonjs 语法 require('inquirer') * 或者,如果您需要 commonjs 模块,则应该依赖旧版本,直到准备好升级环境*/
const inquirer = require("inquirer");/*** inquirer.prompt(questions, answers) -> promise* 启动提示界面(查询会话)*    questions (Array) 包含 Question 对象(使用反应式接口,还可以传递 Rx.Observable 实例)*    答案(对象)包含已回答问题的值。询问者将避免询问此处已提供的答案。默认值 {}。**「Question对象」 问题对象是包含问题相关值的哈希type  (字符串)提示的类型。【input, number, confirm, list, rawlist, expand, checkbox, password, editor】name:(字符串)将答案存储在答案哈希中时使用的名称。如果名称包含句点,它将在答案哈希中定义路径。message:(字符串|函数)要打印的问题。如果定义为函数,第一个参数将是当前询问者会话的答案。默认为 name 的值(后跟冒号)default:(字符串|数字|布尔值|数组|函数)未输入任何内容时使用的默认值,或返回默认值的函数。如果定义为函数,第一个参数将是当前询问者会话的答案**/inquirer.prompt([// 将你的问题放在这{type: "input",name: "food",message: "你吃啥",default: "披萨",},{type: "confirm",name: "hot",message: "吃不吃辣",default: false,},]).then((answers) => {//使用用户反馈。。。无论什么结果console.log(answers);}).catch((error) => {if (error.isTtyError) {// 无法在当前环境中呈现提示} else {//其他问题}});
  • ora:终端loading美化工具
#!/usr/bin/env node
const ora = require("ora");// 启动旋转器。返回实例。如果提供了文本,则设置当前文本。
const spinner = ora("Loading unicorns").start();setTimeout(() => {spinner.color = "yellow";spinner.text = "Loading rainbows";
}, 1000);
// 停止旋转器,将其更改为绿色 ✔ 并保留当前文本或文本(如果提供)。返回实例。请参阅下面的 GIF。// setTimeout(() => {
//   spinner.succeed("succeed");
// }, 2000);// 停止旋转器,将其更改为红色 ✖ 并保留当前文本或文本(如果提供)。返回实例。请参阅下面的 GIF。setTimeout(() => {spinner.fail("fail");
}, 2000);
  • git-clone:下·载项目模版工具
  • figlet:终端生成艺术字
#!/usr/bin/env node
var figlet = require("figlet");// 将 Figlet 对象作为函数调用是调用文本函数的简写。此方法允许您从文本创建 ASCII 艺术。
// 输入文本 - 要转换为 ASCII 艺术的文本字符串。
// 选项 - 指示字体名称的字符串或选项对象(如下所述)
// 回调 - 使用生成的 ASCII Art 执行的函数。figlet("Hello World!!", function (err, data) {if (err) {console.log("Something went wrong...");console.dir(err);return;}console.log(data);
});// 该方法是上述方法的同步版本
// 输入文本 - 要转换为 ASCII 艺术的文本字符串。
// 字体选项 - 指示字体名称的字符串或选项对象(如下所述)。
console.log(figlet.textSync("Boo!", {font: "Ghost", //类型:字符串 默认值:'标准' 指示要使用的 Figlet 字体的字符串值。horizontalLayout: "default", //指示要使用的水平布局的字符串值verticalLayout: "default", //指示要使用的垂直布局的字符串值width: 80, //宽度whitespaceBreak: true, //此选项与“宽度”结合使用。如果此选项设置为 true,则库在限制宽度时将尝试在空白处分解文本。})
);
  • fs-extra:用来操作本地目录
talk is cheap, show me the code
#!/usr/bin/env node// 操作终端命令行
const { program } = require("commander");
// 艺术字
const figlet = require("figlet");
// 操作文件
const fs = require("fs-extra");
// 获取路径
const path = require("path");
// 命令行交互
const inquirer = require("inquirer");
// 彩色输出
const chalk = require("chalk");
//控制台loadding
const ora = require("ora");// clone 项目
const gitClone = require("git-clone");// 项目仓库
const projectList = {vue: "https://gitee.com/y_project/RuoYi-Vue.git",react: "https://gitee.com/whiteshader/ruoyi-react.git","react&ts": "https://gitee.com/whiteshader/ruoyi-react.git","vue&ts": "https://gitee.com/lyforvue/ruoyi_vue3_ts.git",
};// 修改帮助信息的首行展示
program.usage("<command> [options]");// 版本号
program.version(`v${require("../package.json").version}`);// 艺术字展示 监听 help添加提示信息
program.on("--help", function () {console.log(figlet.textSync("kfc vme50", {font: "Ghost",horizontalLayout: "default",verticalLayout: "default",width: 100,whitespaceBreak: true,}));
});// 创建项目的命令
program.command("create <app-name>") // 创建项目的命令 name必填.description("创建新项目") //描述//执行命令后的回调【命令后的值,】.action(async function (name, option) {//创建以一个名为name的文件夹,把代码放到文件夹下const cwd = process.cwd(); //获取命令执行的文件目录// 创建项目的位置const targetPath = path.join(cwd, name);// 如果文件夹存在if (fs.existsSync(targetPath)) {const res = await inquirer.prompt([{name: "action",type: "list",message: "是否覆盖已有文件夹?",choices: [{name: "YES",value: true,},{name: "NO",value: false,},],},]);//不覆盖 取一个新的名字if (!res.action) return;fs.remove(targetPath);console.log(chalk.red("已删除之前的文件夹"));}//新建项目const res = await inquirer.prompt([{name: "type",type: "list",message: "请选择使用的框架",choices: [{name: "Vue",value: "vue",},{name: "React",value: "react",},],},{name: "ts",type: "list",message: "是否使用ts项目",choices: [{name: "YES",value: true,},{name: "NO",value: false,},],},]);// 是否为tsconst rep = res.type + (res.ts ? "&ts" : "");// 拉取项目模板const spinner = ora("正在加载项目模板...").start();gitClone(projectList[rep], //拉去路径targetPath, //保存路径//分支{checkout: "master",},//回调函数(err) => {if (!err) {fs.remove(path.resolve(targetPath, ".git"));spinner.succeed("项目模板加载完成!");console.log("now run:");console.log(chalk.green(`\n  cd ${name}`));console.log(chalk.green("  npm install"));console.log(chalk.green(`  npm run ${res.type === "react" ? "start" : "dev"}\n`));} else {spinner.fail(chalk.red("项目模板加载失败,请重新获取!", err));}});});//解析控制台参数
program.parse(process.argv);
发布
  1. 注册npm账号
  2. 在本地登录并发布
# 登录刚注册的账号npm login
Username: 用户名
Password: 密码
Email: 注册邮箱
Enter one-time password: 一次性密码  邮箱会收到邮件# 在我们脚手架的根目录下执行发布命令npm publish

注意:

  1. 登录和发包前一定要先查看npm的源,需要修改为https://registry.npmjs.org/

  2. 在发布时包名不能重复,所以可以先在线上搜索下看看有没有存在的包,如果出现403错误可能是包名和线上的包重复了,修改package.json中的name即可

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

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

相关文章

zabbix 与 grafana 对接

一.安装 grafana 1.初始化操作 初始化操作 systemctl disable --now firewalld setenforce 0 vim /etc/selinux/config SELINUXdisabled 2.上传数据包并安装 cd /opt grafana-enterprise-9.4.7-1.x86_64.rpm #上传软件包 yum localinstall -y grafana-enterprise-9.4.7-1…

Javascript常见数据结构和设计模式

在JavaScript中&#xff0c;常见的数据结构包括两大类&#xff1a;原始数据类型&#xff08;Primitive Types&#xff09;和对象类型&#xff08;Object Types&#xff09;。对象类型又可以进一步细分为多种内置对象、数组、函数等。下面是一些JavaScript中常见的数据结构&…

PyFluent入门之旅(4)算例求解

在网格划分完成或已有网格的情况下&#xff0c;可以进行算例的求解。 1. 切换/打开求解器 一般启动求解器前有两种情况&#xff1a; 已启动FluentMeshing并生成了网格&#xff0c;需要在不退出FluentMeshing的情况下直接切换至Fluent求解器。已经有现成的网格文件&#xff0…

检测到弱密码:并非所有密码套件均支持完全前向保密解决方案

问题 检测到弱密码&#xff1a;并非所有密码套件均支持完全前向保密&#xff08;弱密码套件 - ROBOT 攻击&#xff1a;服务器支持易受攻击的密码套件&#xff09; 背景介绍 HTTP 协议自身没有加密机制&#xff0c;但可以通过与 TLS (Transport Layer Security) / SSL (Secur…

【AI资讯】快手 可灵web端上线

可灵 AI – 新一代 AI 创意生产力平台 快手 可灵web端上线了&#xff0c;目前登录即可用&#xff0c;感兴趣可以试试。

90元搭建渗透/攻防利器盒子!【硬件篇】

前言 以下内容请自行思考后进行实践。 使用场景 在某些情况下开软件进行IP代理很麻烦&#xff0c;并不能实现真正全局&#xff0c;而且还老容易忘记&#xff0c;那么为了在实景工作中&#xff0c;防止蓝队猴子封IP&#xff0c;此文正现。 正文 先说一下实验效果&#xff1…

53-1 内网代理3 - Netsh端口转发(推荐)

靶场还是用上一篇文章搭建的靶场 :52-5 内网代理2 - LCX端口转发(不推荐使用LCX)-CSDN博客 一、Netsh 实现端口转发 Netsh是Windows自带的命令行脚本工具,可用于配置端口转发。在一个典型的场景中,如果我们位于公网无法直接访问内网的Web服务器,可以利用中间的跳板机通过…

【LeetCode】十三、分治法:多数元素 + 最大子序列和

文章目录 1、分治法2、leetcode169&#xff1a;多数元素3、leetcode53&#xff1a;最大子序和 1、分治法 分治一般都搭配递归使用&#xff1a; 用分治法的一个应用——归并排序&#xff1a;将一组数不停的一分为二&#xff0c;直到分到每组只有一个数的时候 分到每组只有一个数…

Python28-7.5 降维算法之t-分布邻域嵌入t-SNE

t-分布邻域嵌入&#xff08;t-distributed Stochastic Neighbor Embedding&#xff0c;t-SNE&#xff09;是一种用于数据降维和可视化的机器学习算法&#xff0c;尤其适用于高维数据的降维。t-SNE通过将高维数据嵌入到低维空间&#xff08;通常是二维或三维&#xff09;中&…

Edge浏览器油猴插件的安装与使用

油猴 (又称篡改猴或Tampermonkey) 是最流行的浏览器扩展之一。它允许用户自定义并增强网页的功能。用户脚本是小型 JavaScript 程序&#xff0c;可用于向网页添加新功能或修改现有功能。使用油猴&#xff0c;您可以轻松在任何网站上创建、管理和运行这些用户脚本。 1.插件的安…

【数据结构与算法】希尔排序

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​

关于新装Centos7无法使用yum下载的解决办法

起因 之前也写了一篇类似的文章&#xff0c;但感觉有漏洞&#xff0c;这次想直接把漏洞补齐。 问题描述 在我们新装的Centos7中&#xff0c;如果想要用C编程&#xff0c;那就必须要用到yum下载&#xff0c;但是&#xff0c;很多新手&#xff0c;包括我使用yum下载就会遇到一…

mupdf加载PDF显示中文乱码

现象 加载PDF显示乱码,提示非嵌入字体 non-embedded font using identity encoding调式 在pdf-font.c中加载字体 调试源码发现pdf文档的字体名字居然是GBK&#xff0c;估计又是哪个windows下写的pdf生成工具生成pdf 字体方法&#xff1a; static pdf_font_desc * load_cid…

用QFramework重构飞机大战(Siki Andy的)(下01)(06-0? 游戏界面及之后的所有面板)

GitHub // 官网的 全民飞机大战&#xff08;第一季&#xff09;-----框架设计篇&#xff08;Unity 2017.3&#xff09; 全民飞机大战&#xff08;第二季&#xff09;-----游戏逻辑篇&#xff08;Unity 2017.3&#xff09; 全民飞机大战&#xff08;第三季&#xff09;-----完善…

Nginx七层(应用层)反向代理:HTTP反向代理proxy_pass篇

Nginx七层&#xff08;应用层&#xff09;反向代理 HTTP反向代理proxy_pass篇 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of thi…

Python3极简教程(一小时学完)中

异常 在这个实验我们学习 Python 的异常以及如何在你的代码中处理它们。 知识点 NameErrorTypeError异常处理&#xff08;try..except&#xff09;异常抛出&#xff08;raise&#xff09;finally 子句 异常 在程序执行过程中发生的任何错误都是异常。每个异常显示一些相关…

fasttext工具介绍

fastText是由Facebook Research团队于2016年开源的一个词向量计算和文本分类工具。尽管在学术上并未带来巨大创新&#xff0c;但其在实际应用中的表现却非常出色&#xff0c;特别是在文本分类任务中&#xff0c;fastText往往能以浅层网络结构取得与深度网络相媲美的精度&#x…

Maven一键配置阿里云远程仓库,让你的项目依赖飞起来!

文章目录 引言一、为什么选择阿里云Maven仓库&#xff1f;二、如何设置Maven阿里云远程仓库&#xff1f;三、使用阿里云Maven仓库的注意事项总结 引言 在软件开发的世界里&#xff0c;Maven无疑是一个强大的项目管理工具&#xff0c;它能够帮助我们自动化构建、依赖管理和项目…

QT5.14.2与Mysql8.0.16配置笔记

1、前言 我的QT版本为 qt-opensource-windows-x86-5.14.2。这是QT官方能提供的自带安装包的最近版本&#xff0c;更新的版本需要自己编译源代码&#xff0c;可点击此链接进行下载&#xff1a;Index of /archive/qt/5.14/5.14.2&#xff0c;选择下载 qt-opensource-windows-x86…

为什么固定尺寸 AdSense 广告依旧会出现并非指定的尺寸广告?

经常在网站上投放谷歌 AdSense广告的站长应该都碰到过&#xff0c;明明投放的是固定尺寸的广告位里旧会出现并非指定尺寸的AdSense 广告&#xff0c;很诡异的感觉。其实这都是因为你的 AdSense 账号广告优化造成的&#xff0c;其中里面就包含了广告尺寸优化&#xff0c;只需要在…