使用nodejs搭建脚手架工具并发布到npm中

使用nodejs搭建脚手架工具并发布到npm中

  • 一、安装环境依赖及脚手架搭建过程
  • 二、搭建Monorepo 风格的脚手架工程
  • 三、脚手架的必备模块
    • 命令参数模块
      • 获取命令参数
      • 设置子命令
    • 用户交互模块
    • 文件拷贝模块
      • 脚手架中的路径处理
      • 目录守卫
    • 文件拷贝模块
    • 动态文件生成模块
      • mustache简介
    • 自动安装依赖模块
    • 发布与安装
  • 四、总结

一、安装环境依赖及脚手架搭建过程

  1. 安装 vue-cli 脚手架：npm install -g vue-cli

  2. 创建项目：vue create myapp
    在这里插入图片描述

  3. 输入cmd：
    在这里插入图片描述

  4. 在cmd中输入：npm init 输入后会生成一个package.json文件
    在这里插入图片描述

  5. 在package.json中添加：./bin/index.js
    在这里插入图片描述

这样就声明了一个mortal命令，而./bin/index.js是运行mortal命令后，所运行js的文件相对路径

  1. 创建bin文件夹、在bin文件夹下创建index.js文件：
    在这里插入图片描述

注意：必须加#!/usr/bin/env node否则会报错

  1. **在cmd窗口执行mortal命令：**会报错
    在这里插入图片描述

报错原因：并不是声明命令的方法错误，而是需要将该脚手架发布到npm上，在package.json中可以看到name值为mortal-cli，所以可以通过运行npm install -g mortal-cli将脚手架安装到本地，再运行mortal才会成功（可理解为安装vue-cli脚手架一样的操作过程）

  1. **实现在本地调试脚手架的能力：**先执行npm link再执行mortal则运行成功
    在这里插入图片描述

**总结：**到此一个声明命令结束
注意： npm link的弊端：若本地存在多个版本的脚手架仓库，在A仓库中修改代码，然后运行mortal命令，会发现所修改的代码并不生效。原因是：在仓库B的脚手架中已经运行了npm link，从而导致再次运行mortal时实际上是执行仓库B中的代码。所以要先在仓库B的脚手架工程中先进行释放，运行npm unlink，然后再在仓库A中执行npm link、mortal，此时仓库A中已经修改的代码会生效。所以可以通过pnpm来搭建monorepo风格的脚手架工程。
Monorepo风格：即代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。含有多个子工程，每一个子工程都能独立编译打包，并将产物变成npm包，所以又叫monorepo为多包工程。

  1. 修改package.json以便于更好的发布到npm上：
    在这里插入图片描述

注意：在dependencies中声明mortal-cli依赖包版本需使用workspace:*来定义，而不是使用具体的版本号来定义。
在 pnpm 中使用 workspace: 协议定义某个依赖包版本号时，pnpm 将只解析存在工作空间内的依赖包，不会去下载解析 npm 上的依赖包。
把 mortal-cli 依赖包引入，执行 pnpm i 安装依赖，其效果就跟执行 npm install -g mortal-cli一样，只不过不是全局安装而已，只在调试子工程内安装 mortal-cli 脚手架。然后调试子工程就直接引用脚手架子工程本地编译打包后的产物，而不是发布到 npm 上的产物，彻底做到本地调试。
另外脚手架子工程和调试子工程是在同一个工程中，这样就做一对一的调试，从而解决了使用 npm link 来实现本地调试的弊端。
同时在 scripts 定义了脚本命令，在调试工程中执行 pnpm mortal 既是执行了 mortal 命令，不用脚手架工程中执行 npm link 就可以运行 mortal 命令。

  1. **安装pnpm：**先安装pnpm安装pnpm地址详细请见该文章 安装命令：iwr https://get.pnpm.io/install.ps1 -useb | iex
    在这里插入图片描述

二、搭建Monorepo 风格的脚手架工程

  1. 新建mortal文件夹：
    在这里插入图片描述

  2. 使用pnpm搭建monorepo风格脚手架：pnpm init
    在这里插入图片描述

  3. 创建pnpm-workspace.yaml工作空间配置文件： 并添加以下代码
    在这里插入图片描述

声明了 packages 和 examples 文件夹中子工程是同属一个工作空间的，工作空间中的子工程编译打包的产物都可以被其它子工程引用。
在这里插入图片描述

  1. 使用pnpm初始化：pnpm init在packages文件夹下的mortal文件夹下产生一个package.json文件
    在这里插入图片描述
    在这里插入图片描述

  2. 在package.json文件中新建bin字段声明mortal
    在这里插入图片描述

  3. 在packages->mortal下新建bin文件夹，在bin文件夹下新建index.js文件
    在这里插入图片描述

  4. 在与packages同级目录下新建examples文件夹，在该文件夹下创建app文件夹 输入cmd，再输入pnpm init进行初始化生成package.json文件
    在这里插入图片描述
    在这里插入图片描述

  5. 给example文件夹中的package.json添加代码:
    在这里插入图片描述

  6. 在最外层的根目录执行安装命令：pnpm install
    在这里插入图片描述

  7. 当前的目录结构：

Project Tree插件可生成tree目录，或者在该文件夹中cmd到根目录->输入TREE>文件名.txt也可生成tree目录
使用Project Tree插件：Crtl + Shift + P -> 输入Project Tree->生成README.md文件这里是引用
在这里插入图片描述
这里是目录工程化
在这里插入图片描述

// 当前项目的目录结构如下所示：
mortal
├─ examples
│  └─ app
│     └─ package.json
├─ package.json
├─ packages
│  └─ mortal-cli
│     ├─ bin
│     │  └─ index.js
│     └─ package.json
├─ pnpm-lock.yaml
└─ pnpm-workspace.yaml

三、脚手架的必备模块

命令参数模块

获取命令参数

  1. Node.js 中的 process 模块提供了当前 Node.js 进程相关的全局环境信息，比如命令参数、环境变量、命令运行路径process模块 安装命令：npm install 
const process = require('process');
// 获取命令参数
console.log(process.argv);

脚手架提供的 mortal 命令后面还可以设置参数，标准的脚手架命令参数需要支持两种格式：

mortal --name=orderPage
mortal --name orderPage

通过 process.argv 来获取，要额外处理两种不同的命令参数格式不方便，这里使用 yargs 开发脚手架/CLI，这里推荐 yargs 开源库来解析命令参数

  1. 这里使用 yargs 开发脚手架/CLI：pnpm add yargs --F mortal-cli
    在这里插入图片描述

这里要注意，mortal-cli 是取 mortal-cli 子工程中 package.json 中 name 字段的值，而不是 mortal-cli 子工程文件夹的名称。yargs 的使用非常简单，其提供的 argv 属性是对两个格式的命令参数的处理结果。

  1. 在 bin/index.js 添加如下代码：
#!/usr/bin/env node
const yargs = require('yargs')console.log('name',yargs.argv.name);

在这里插入图片描述

注意，以上代码是在 Node.js 环境中运行，Node.js 的模块是遵循 CommonJS 规范的，如果要依赖一个模块，要使用 Node.js 内置 require 系统函数引用模块使用。

  1. 在example/app文件夹下执行：pnpm mortal -- --name=orderPage
    在这里插入图片描述

注意，在 pnpm mortal 后面需要加上两个连字符（--），这是为了告诉 pnpm 后面的参数是传递给命令mortal 本身的，而不是传递给 pnpm 的。结果是name orderPage

设置子命令

假如脚手架要对外提供多个功能，不能将所有的功能都集中在 mortal 命令中实现。可通过 yargs 提供的 command 方法来设置一些子命令，让每个子命令对应各自功能，各司其职。
yargs.command 的用法是 yargs.command(cmd, desc, builder, handler)

  • cmd：字符串，子命令名称，也可以传递数组，如 [‘create’, ‘c’]，表示子命令叫 create，其别名是 c；
  • desc：字符串，子命令描述信息；
  • builder：一个返回数组的函数，子命令参数信息配置，比如可以设置参数：
    • alias：别名；
    • demand：是否必填；
    • default：默认值；
    • describe：描述信息；
    • type：参数类型，string | boolean | number。
  • handler: 函数，可以在这个函数中专门处理该子命令参数。

设置一个用来生成一个模板的子命令，把这个子命令命名为create： 修改在 bin/index.js 文件中的代码：

#!/usr/bin/env node
//const yargs = require('yargs');
yargs.command(['create', 'c'],'新建一个模板',function (yargs) {return yargs.option('name', {alias: 'n',demand: true,describe: '模板名称',type: 'string'})},function (argv) {console.log('argv', argv);}
).argv;

在app下执行：pnpm mortal create -- --name=orderPage和pnpm mortal c -- --name=orderPage
在这里插入图片描述

配置了子命令 create 的参数 name 的一些参数信息，如何将这些信息展示给用户：输入子命令的参数有错误，就会在命令行窗口中显示这些参数信息。

在app文件夹目录下：pnpm mortal c -- --abc
在这里插入图片描述

最简单地实现了脚手架和用户之间的交互能力，但是如果自定义参数过多，那么命令行参数的交互方法对于用户来说是非常不友好的。所以需要通过用户交互模块桥接与用户进行交互。

用户交互模块

  1. 下载inquirer： 实现询问式的交互 pnpm add inquirer@8.2.5 --F mortal-cli
    在这里插入图片描述

为了使用 require 引入 inquirer ，要使用 8.2.5 版本的 inquirer。
inquirer 能力：询问用户问题、获取并解析用户的输入、检测用户的答案是否合法

主要通过 inquirer.prompt() 来实现。prompt 函数接收一个数组，数组的每一项都是一个询问项，询问项有很多配置参数，下面是常用的配置项：

  • type：提问的类型，常用的有：
    • 输入框：input；
    • 确认：confirm；
    • 单选组：list；
    • 多选组：checkbox；
  • name：存储当前问题答案的变量；
  • message：问题的描述；
  • default：默认值；
  • choices：列表选项，在某些type下可用；
  • validate：对用户的答案进行校验；
  • filter：对用户的答案进行过滤处理，返回处理后的值。

总结：创建一个模板文件，大概会询问用户：模板文件名称、模板类型、使用什么框架开发、使用框架对应的哪个组件库开发等等

  1. 在 bin 文件夹中新建 inquirer.js 文件夹：
// 添加的内容
const inquirer = require("inquirer");function inquirerPrompt(argv) {const { name } = argv;return new Promise((resolve, reject) => {inquirer.prompt([{type: "input",name: "name",message: "模板名称",default: name,validate: function (val) {if (!/^[a-zA-Z]+$/.test(val)) {return "模板名称只能含有英文";}if (!/^[A-Z]/.test(val)) {return "模板名称首字母必须大写";}return true;},},{type: "list",name: "type",message: "模板类型",choices: ["表单", "动态表单", "嵌套表单"],filter: function (value) {return {表单: "form",动态表单: "dynamicForm",嵌套表单: "nestedForm",}[value];},},{type: "list",message: "使用什么框架开发",choices: ["react", "vue"],name: "frame",},]).then((answers) => {const { frame } = answers;if (frame === "react") {inquirer.prompt([{type: "list",message: "使用什么UI组件库开发",choices: ["Ant Design"],name: "library",},

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

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

相关文章

一款轻量、干净的 Vue 后台管理框架

一款轻量、干净的 Vue 后台管理框架

开始之前 在开始介绍之前我想谈谈为什么要自己做一个后台管理，我知道很多人都用一些开源的后台管理项目，这些老前辈有很多亮点值得学习，但是存在的一些问题同样不可忽视，我认为很多开发者会被困扰(仅代表个人观点) 技术栈老旧不升…
阅读更多...
【JavaEE框架技术】spring-1

【JavaEE框架技术】spring-1

目录 一、使用maven管理spring项目 1.1搭建开发环境 1.1.1修改settings.xml文件 1.1.2把该文件拷入.m2目录 1.1.3打开ecplise，建立maven项目 1.1.4向pom.xml文件中添加spring的坐标： 1.4.1.1代码含义 1.4.1.2代码说明 1.2创建spring配置文件 二…
阅读更多...
OpenHarmony实战：瑞芯微RK3566移植案例（下）

OpenHarmony实战：瑞芯微RK3566移植案例（下）

OpenHarmony实战：瑞芯微RK3566移植案例（下） OpenHarmony实战：瑞芯微RK3566移植案例（中） WIFI 整改思路及实现流程 整改思路 接下来熟悉HCS文件的格式以及"HDF WIFI”核心驱动框架的代码启动初始化…
阅读更多...
Cali Linux上的PoshC2安装和使用

Cali Linux上的PoshC2安装和使用

一、安装PoshC2 curl -sSL https://raw.githubusercontent.com/nettitude/PoshC2/master/Install-for-Docker.sh | sudo bash二、创建工程 posh-project -n test三、修改配置文件 posh-config将图中的baidu.com改为自己要攻击的域名或者IP地址 四、执行 posh-server 显示没…
阅读更多...
kettle介绍-Step之CSV Input

kettle介绍-Step之CSV Input

CSV Input/CSV 文件输入介绍 CSV 文件输入步骤主要用于将 CSV 格式的文本文件按照一定的格式输入至 流中 Step name:步骤的名称，在单一转换中，名称必须唯一Filename:指定输入 CSV 文件的名称，或通过单击右边的“浏览”按钮指定本地的 CSV …
阅读更多...
PicGo日志报错 image not found in clipboard

PicGo日志报错 image not found in clipboard

PicGo: image not found in clipboard 文章目录 PicGo: image not found in clipboard问题描述问题尝试解决方案 问题描述 背景：在剪切板中的图片无法通过 PicGo 的剪切板图片进行上传。 读取PicGo 日志报错，显示图片没有在剪切板中找到。 $ ------Erro…
阅读更多...
【信贷后台管理之（五）】

【信贷后台管理之（五）】

文章目录 目录结构一、面包屑组件封装二、退出登录接口联调三、申请列表的菜单路由3.1 路由创建，表格编写3.2 列表接口调用3.3 出生日期转变3.4 申请状态3.5 申请列表的操作3.5.1 编辑删除提交操作3.5.2 禁用状态3.5.3 操作接口3.5.4 搜索查询3.5.5 申请列表分页功能…
阅读更多...
预处理不求人！教你如何轻松搞定

预处理不求人！教你如何轻松搞定

1. 预定义符号 2. #define定义常量 3. #define定义宏 4. 带有副作⽤的宏参数 5. 宏替换的规则 6. 宏函数的对⽐ 7. #和## 8. 命名约定 9. #undef 10. 命令⾏定义 11. 条件编译 12. 头⽂件的包含 13. 其他预处理指令 正文开始： 1. 预定义符…
阅读更多...
【C#】版本号

【C#】版本号

💻 代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace ConsoleApp16 {internal class Program{static void Main(string[] args){Version version01 new Version("4.0.0…
阅读更多...
鲁大师2024年新能源汽车Q1季报：问界M7蝉联智能榜单第一

鲁大师2024年新能源汽车Q1季报：问界M7蝉联智能榜单第一

回顾2024年的开局，比亚迪掀桌子，高合下桌子，行业已经进入惨烈的淘汰赛阶段；理想MEGA首发失利，问界销量步步紧逼，蔚来宣布全系焕新，新势力们也在继续着「攻与守」；而我们的新玩家小米…
阅读更多...
linux通配符

linux通配符

通配符，它是一种用于匹配文件名的特殊字符。通配符在Linux中可以帮助我们更加方便和快捷地查找和操作文件。
阅读更多...
【Nuxt3】内置组件介绍

【Nuxt3】内置组件介绍

简言 介绍下nuxt3的内置组件用法。 ClientOnly 使用 <ClientOnly> 组件仅在客户端渲染组件。 属性&#xff1a; placeholderTag | fallbackTag — 指定要在服务器端呈现的标记。placeholder | fallback — 指定要在服务器端渲染的内容&#xff0c;并在浏览器挂载 <…
阅读更多...
【无标题】nodejs+mogoodb数据库写注册接口

【无标题】nodejs+mogoodb数据库写注册接口

描述 本篇文章主要记录使用nodejs express搭建服务器&#xff0c;并链接mogoodb数据来书写简单的后台接口&#xff1b;前端项目使用的vue2的一个酒店管理项目。阅读本文章&#xff0c;可以了解如何连接mogoodb数据库&#xff0c;和一些对数据库进行操作的命令。前端如何进行跨…
阅读更多...
RISC-V特权架构 - 模式切换与委托

RISC-V特权架构 - 模式切换与委托

RISC-V特权架构 - 模式切换与委托 1 导致模式切换的常见动作2 异常处理规则3 异常处理时模式切换3.1 在U模式下&#xff0c;发生异常3.2 在S模式下&#xff0c;发生异常3.3 在M模式下&#xff0c;发生异常 4 系统调用时模式切换5 中断处理时模式切换 本文属于《 RISC-V指令集基…
阅读更多...
图像处理环境配置opencv-python

图像处理环境配置opencv-python

下载python&#xff0c;配置pip使用清华源下载镜像&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 切换到python目录下&#xff0c;右击cmd&#xff0c;执行pip升级指令: python -m pip install --upgrade pip 下载opencv&#x…
阅读更多...
西圣、万魔、倍思开放式耳机值不值得买？测评对比探讨！

西圣、万魔、倍思开放式耳机值不值得买？测评对比探讨！

自开放式耳机问世以来&#xff0c;便凭借其独特魅力赢得了众多音乐爱好者的青睐。它不仅佩戴起来舒适无比&#xff0c;还能让用户随时聆听周围的环境声音&#xff0c;保持与外界的沟通。同时&#xff0c;在卫生方面也有着不俗的表现。相较于传统的入耳式耳机&#xff0c;这些优…
阅读更多...
uniapp使用npm命令引入font-awesome图标库最新版本并解决APP和小程序不显示图标的问题

uniapp使用npm命令引入font-awesome图标库最新版本并解决APP和小程序不显示图标的问题

uniapp使用npm命令引入font-awesome图标库最新版本 图标库网址&#xff1a;https://fontawesome.com/search?qtools&or 命令行&#xff1a; 引入 npm i fortawesome/fontawesome-free 查看版本 npm list fortawesome在main.js文件中&#xff1a; import fortawesome/fo…
阅读更多...
嵌入式Linux系统调用执行基本流程

嵌入式Linux系统调用执行基本流程

内核态与用户态 什么是系统调用 系统调用是怎么实现的 库函数write 库函数扩展汇编宏 int 0x80中断 调用对应的中断处理函数 检索系统调用函数表 最终执行sys_write 内核态与用户态数据交互 内核态与用户态 早期工程师们在操作系统上编写程序的时候，自己写个程序可以访问别人…
阅读更多...
3.5、文本显示（Text/Span）

3.5、文本显示（Text/Span）

创建文本 Text 可通过以下两种方式来创建： string 字符串 效果图 Text(我是一段文本)引用 Resource 资源 资源引用类型可以通过 $r 创建 Resource 类型对象，文件位置为 /resources/base/element/string.json。 引用的资源位于：src/main/resources/base/element/string…
阅读更多...
红酒：按年份分类，探究不同类型红酒的品质

红酒：按年份分类，探究不同类型红酒的品质

在红酒的世界里&#xff0c;年份是一个至关重要的因素&#xff0c;它对红酒的品质和价值有着深远的影响。云仓酒庄雷盛红酒深知这一点&#xff0c;从酿造的首年起&#xff0c;就严格把控每一个环节&#xff0c;力求为消费者提供品质的红酒。 首先&#xff0c;让我们了解一下什么…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发