打造属于自己的脚手架工具并发布到npm仓库

news2024/11/24 22:35:56

一、创建项目

  1. 使用 npm init -y 创建项目
  2. 创建项目入口文件 index.js
  3. package.json 中添加 bin 字段
  4. 使用 npm link 命令将文件映射至全局,使可以在本地测试 zp 命令
// "zp" 为用于全局执行脚手架的命令,vue-cli中使用的是vue命令
"bin": {
    "zp": "index.js",
},

image.png

image.png

image.png

二、入口文件编码

index.js文件头部需要加上#!/usr/bin/env node(用于指定这个脚本的解释程序是node)

1.使用commander加上命令行参数
npm i commander
#!/usr/bin/env node
const { program } = require("commander");

program.version("0.1.0");

program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    console.log("创建项目:" + project);
  });

program
  .command("help")
  .description("查看所有可用的模板帮助")
  .action(function () {
    console.log(`这是关于项目帮助信息`);
  });

program.parse(process.argv);

image.png

2.准备一个GitHub模板,使用download-git-repo下载模板
npm i download-git-repo
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        console.log("下载失败");
      } else {
        console.log("下载成功");
      }
    });
  });
3.用ora增加下载中的loading效果
npm i ora@3.4.0
const ora = require("ora");
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
      } else {
        spinner.succeed();
      }
    });
  });
4.使用chalk 和 logSymbols增加文本样式
npm i chalk@2.4.2 log-symbols@4.0.0
const chalk = require("chalk");
const logSymbols = require("log-symbols");
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
        return console.log(
          logSymbols.error,
          chalk.red("下载失败,失败原因:" + err)
        );
      } else {
        spinner.succeed();
        return console.log(logSymbols.success, chalk.yellow("下载成功"));
      }
    });
  });

index.js文件完整代码为:

#!/usr/bin/env node
const { program } = require("commander");
const download = require("download-git-repo");
const ora = require("ora");
const chalk = require("chalk");
const logSymbols = require("log-symbols");

program.version("0.1.0");

program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
        return console.log(
          logSymbols.error,
          chalk.red("下载失败,失败原因:" + err)
        );
      } else {
        spinner.succeed();
        return console.log(logSymbols.success, chalk.yellow("下载成功"));
      }
    });
  });

program
  .command("help")
  .description("查看所有可用的模板帮助")
  .action(function () {
    console.log(`这是关于项目帮助信息`);
  });

program.parse(process.argv);

使用zp create 项目名即可下载项目模板代码创建项目

5.将项目发布至npm仓库
  1. 打开npm官网
  2. 注册一个npm账号
  3. 在npm中检索是否有重复的包名
  4. 将package.json中的name改为发布到npm上的包名
  5. 打开控制台,执行npm login
  6. 登陆成功后,在项目下执行npm publish 发布
  7. 发布成功后即可通过npm i命令下载

image.png

image.png

注意事项:因为网络问题可能导致download-git-repo插件下载时报128错误,可通过科学上网方式解决

写在最后:欢迎关注扫码作者微信公众号fever code,获取一手技术分享⛽️
在这里插入图片描述

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

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

相关文章

STM32-I2C

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. I2C通信1.1 I2C通信简介1.2 硬件电路1.3 I2C时序基本单元1.3.1 起始条件和终止条件1.3.2 发送一个字节1.3.3 接收一个字节1.3.4 发送应答和接收应答 1.4 I2C时序1.4.1 指定地址写1.4.2 当前地址读1.4.3 指定地址读…

利用docker搭建漏洞环境,使用SSRF+Redis写入centos以及ubuntu的公钥,实现免密登录

一、实验环境 kali:在kali中搭建docker容器环境&#xff0c;这里我主要是使用第一个&#xff1b; redis作为一种数据库&#xff0c;它可以将数据写入内存中去&#xff0c;我们通过利用ssrf请求&#xff0c;实现服务器对自己的公钥写入&#xff0c;从而实验免密登录&#xff1b;…

el-table 树形数据与懒加载 二级数据不展示

返回的数据中 children和hasChildren只能有一个&#xff0c;不能同时存在&#xff0c;否则加载数据会失败

优化后Day53 动态规划part11

LC1143最长公共子序列 1.dp数组的含义&#xff1a;dp[i][j]表示以下标i结尾的text1子序列和以下标j结尾的text2子序列的最长公共子序列 2. 初始化&#xff1a;跟LC718一样&#xff0c;i结尾的需要初始化&#xff0c;i-1结尾不需要初始化 3. 递推公式 如果charAt(i)charAt(j)&…

集成测试技术栈

前端 浏览器操作&#xff1a;playwright、selenium 后端 testcontainercucumbervitestcypressmsw

Threejs将场景生成全景图导出

实现思路&#xff1a; 创建全景相机CubeCamera&#xff08;六个方位的透视相机&#xff09;并渲染场景 读取六个面的纹理数据 填充进canvas中 即可按照常规的canvas导出图片了 demo https://gitee.com/honbingitee/three-template-next.js/tree/HDR 核心代码 const cubeRender…

《python程序语言设计》2018版第5章第53题利用turtle绘制sin和cos函数 sin蓝色,cos红色和52题类似

直接上题和代码 5.53 &#xff08;Turtle&#xff1a;绘制sin和cos函数&#xff09;编写程序绘制蓝色的sin函数和红色的cos函数。 代码和结果 turtle.speed(10) turtle.penup() # sin 用蓝色 turtle.color("blue") #这道题和上道题一样&#xff0c;先把turtle放到起始…

数列结构(3.9)——队列应用

树的层次遍历 树的层次遍历&#xff0c;也称为树的广度优先遍历&#xff0c;是一种按照树的层次顺序&#xff0c;从上到下、从左到右遍历树中所有节点的算法。在二叉树中&#xff0c;这种遍历方式通常使用队列来实现。下面是层次遍历的基本步骤&#xff1a; 创建一个空队列&a…

排序(2)

我们在排序&#xff08;1&#xff09;中说到选择排序的代码&#xff1a; void SelectSort(int* a,int n) {int begin0,endn-1;int minibegin,maxbegin;for(int ibegin1;i<end;i){if(a[i]>a[max]){maxii;}if(a[i]<a[mini]){minii;}begin;--end;}Swap(&a[beign],&a…

UE5 05-利用 timeline 插值运动

理解成 unity Dotween DoMove 插值运动即可 AddTimeLine 节点 物体插值运动 物体插值缩放 一个timeline 可以K多个动画帧

C语言 printf 函数多种输出格式以及占位输出

一、输出格式 在C语言中&#xff0c;printf 函数提供了多种输出格式&#xff0c;用于控制不同类型数据的输出方式。 1.整数输出格式 %d&#xff1a;以十进制形式输出整数。 %o&#xff1a;以八进制形式输出整数&#xff08;无前导0&#xff09;。 %x 或 %X&#xff1a;以十六进…

包/final/权限修饰符/代码块

包package 1、包的作用 包用来管理不同的类。 2、包名 包名要全部小写&#xff0c;一般是域名反写&#xff0c;如com.liu。在Java中&#xff0c;java解释器会将package中的.解释为目录分隔符/&#xff0c;也就是说该文件的目录结构为&#xff1a;...com/liu/... 3、全类名…

Nginx 报错问题汇总

目录 一、nginx: [emerg] invalid number of arguments in "include" directive in C:\Program Files\nginx-1.15.4/conf/nginx.conf:61 总结&#xff1a; 二、nginx: [error] OpenEvent("Global\ngx_reload_2152") failed (5: Access is denied) 解决…

《昇思25天学习打卡营第14天|onereal》

第14天学习内容如下&#xff1a; Diffusion扩散模型 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成功运行。如您下载本文档为Python文件&#xff0c…

LabVIEW的JKI State Machine

JKI State Machine是一种广泛使用的LabVIEW架构&#xff0c;由JKI公司开发。这种状态机架构在LabVIEW中提供了灵活、可扩展和高效的编程模式&#xff0c;适用于各种复杂的应用场景。JKI State Machine通过状态的定义和切换&#xff0c;实现了程序逻辑的清晰组织和管理&#xff…

IDEA常用技巧荟萃:精通开发利器的艺术

1 概述 在现代软件开发的快节奏环境中,掌握一款高效且功能全面的集成开发环境(IDE)是提升个人和团队生产力的关键。IntelliJ IDEA,作为Java开发者的首选工具之一,不仅提供了丰富的编码辅助功能,还拥有高度可定制的界面和强大的插件生态系统。然而,要充分发挥其潜力,深…

[激光原理与应用-101]:南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 5 - 3C行业应用 - 电子布局类型

目录 前言&#xff1a; 一、激光在3C行业的应用概述 1.1 概述 1.2 激光焊接在3C-电子行业应用 二、3C电子行业中激光焊接 2.1 纽扣电池 2.2 均温板 2.3 指纹识别器 2.4 摄像头模组 2.5 IC芯片切割 三、3C行业中激光切割 四、激光在3C行业中的其他应用 4.1 涂层去除…

SpringBoot源码阅读(1)——环境搭建

SpringBoot官网 官网 https://spring.io/projects/spring-boot 代码仓库 github&#xff1a;https://github.com/spring-projects/spring-boot gitee: https://gitee.com/mirrors/spring-boot 下载代码 git clone https://gitee.com/mirrors/spring-boot.git下载的代码中有些…

STM32-OC输出比较和PWM

本内容基于江协科技STM32视频内容&#xff0c;整理而得。 文章目录 1. OC输出比较和PWM1.1 OC输出比较1.2 PWM&#xff08;脉冲宽度调制&#xff09;1.3 输出比较通道&#xff08;高级&#xff09;1.4 输出比较通道&#xff08;通用&#xff09;1.5 输出比较模式1.6 PWM基本结…

数据库逆向工程工具reverse_sql

reverse_sql 是一个用于解析和转换 MySQL 二进制日志&#xff08;binlog&#xff09;的工具。它可以将二进制日志文件中记录的数据库更改操作&#xff08;如插入、更新、删除&#xff09;转换为反向的 SQL 语句&#xff0c;以便对系统或人为产生的误操作进行数据回滚和恢复。 *…