用Yeoman&generator自定义脚手架

最新推荐文章于 2023-05-18 00:57:40 发布
转载 最新推荐文章于 2023-05-18 00:57:40 发布 · 199 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/CarrreyYan_979292/article/details/108413170

本文详细介绍如何使用Yeoman及generator-generator创建个性化脚手架工具，包括安装、配置及发布流程。

用Yeoman&generator自定义脚手架

制作属于自己 的脚手架

gennerator 的脚手架方式

yo命令

官网地址：https://yeoman.io/yo

yeoman 制作脚手架命令

安装

npm install -g yo

yo 命令的作用是制作脚手架命令

yo --version 查看版本号在这里插入图片描述

制作脚手架

generater-generator 可以制作脚手架工具

npm install -g generator-generator
在这里插入图片描述

生成脚手架工具

yo gennerator-脚手架名称
在这里插入图片描述

制作中配置项目解释

在这里插入图片描述

脚手架创建成功

在这里插入图片描述

将自己的工程代码放入到脚手架中

1更改pack.json文件中version
在这里插入图片描述
2更改入口文件index.js中部分配置
在这里插入图片描述
3:开始导入自己的工程代码
在这里插入图片描述

  • 导入完成效果
    在这里插入图片描述
本地测试脚手架是否

cd generator-shop-generator

npm link
在这里插入图片描述

  • 随便新建一个文件目录（模拟使用脚手架生项目工程）
    在这里插入图片描述
  • 查看脚手架运行过程结果
    在这里插入图片描述
发布脚手架

如果不会请自行百度

将 generator-shop-generator文件发布到npm上

npm login使用命令登陆到npm
在这里插入图片描述

开始发布

npm publish
在这里插入图片描述
测试发布，并从npm 上使脚手架

  • 去npm官网搜索 generator-shop-generator
    在这里插入图片描述
  • 在本地安装自己的脚手架

npm i generator-shop-generator
在这里插入图片描述

  • 使用脚手架生成项目

yo shop-generator
在这里插入图片描述

Yeoman实战指南：从零打造自定义项目生成器
ztK63LrD的博客
05-15 993
Yeoman是一个由Google开发的开源工具链，旨在自动化项目脚手架的创建，帮助开发者避免重复劳动。它通过生成器（Generators）快速搭建项目结构，并集成了主流框架和工具的最佳实践。Yeoman适用于复杂项目结构和多技术栈的场景，与其他专用脚手架工具（如Create React App、Vite、Angular CLI）相比，具有更高的通用性和灵活性。生成器是Yeoman的核心组件，通过代码逻辑生成定制化的项目结构，支持多种技术栈和项目类型。开发者还可以自定义生成器，以满足特定业务需求。Yeoman
【前端工程化】一：脚手架工具yeoman以及plop的使用
Whoopsina的博客
01-05 990
脚手架的作用是创建项目基础结构，提供项目规范和约定，我们常用的三大框架也是有各自的脚手架生态
express-generator脚手架的使用（前端开发接口、开启本地服务器等）
失眠时间的博客
05-18 1810
oror如果没有安装权限，得使用管理员执行，或者前面 添加sudo，例如安装后执行查看是否安装成功，更多可使用express -h数据的模拟同时，也可开发服务器查看构建之后包的访问，且还可学习NodeJs开发后台接口的知识后续有机会详细了解下NodeJs开发后台的细节。
使用 Yeoman 自定义 Generator，包含新建 Vue 模板案例
GoldenaArcher的博客
06-17 2142
本章学习内容如下： 学习 Yeoman 即 Generator 的使用 使用 Yeoman 自定义一个 Generator 案例学习：使用 Yeoman 自定义一个 Vue 项目 案例学习：使用 inquirer 和 ejs 实现一个小型的脚手架工具 什么是 Yeoman Yeoman 是一个通用型的网页应用的脚手架工具，和 angular-cli, create-react-app, vue-cli 比起来，它是一个更加通用的脚手架工具，但是也因此它的灵活性更高。
制作属于自己的脚手架（图文详解）
qq_40137639的博客
09-04 1424
制作属于自己的脚手架（图文详解） yo命令 官网地址：https://yeoman.io/yo yeoman 制作脚手架命令 安装 npm install -g yo yo 命令的作用是制作脚手架命令 yo --version 查看版本号 制作脚手架 *generater-generator 可以制作脚手架工具 npm install -g generator-generator 生成脚手架工具 yo gennerator-脚手架名称 制作中配置项目解释 脚手架创建成功 将自己的工程代码放入到脚
yeoman-generator-frontend:前端项目的 yeoman 生成器
05-31
入门 您可以将此生成器用作前端项目的设置。 随时修改。 什么是约曼？ 关于 yeoman 的最佳知识库在他们的网站上： generator 快速安装yeoman 如果你没有 npm 然后去： 安装 npm sudo npm install npm -g 安装 yeoman npm install -g yo Yeoman 生成器前端样板 要运行“ generator-frontend-boilerplate”，请在任意位置下载源代码。 打开你的终端，进入生成器的根目录（'generator-frontend-boilerplate'/）并输入 npm install 节点模块将在该类型之后安装 npm link 这将安装生成器依赖项并将全局模块符号链接到本地​​文件。 npm 完成后，创建一个文件夹，在其中启动项目并调用 yo frontend-boilerplate
开发脚手架yeoman、generator、plop
woyebuzhidao321的博客
01-23 643
一、前端工程化 前端工程化是指遵循一定的标准和规范通过工具提高效率的一种手段。技术是为了解决问题而存在的，主要解决的问题 传统语言和语法的弊端 无法使用模块化/组件化 重复的机械性工作 依赖后端接口支持 整体依赖后端项目 很难做到代码风格统一、质量难以做保证 工程化表现 一切以提高效率、降低成本、质量保证为目的的手段都属于工程化 创建项目 创建特定目录结构 创建特定文件类型 编码 格式化代码 校验代码风格 编译/构建/打吧 预览/测试 Web Server/Mock Live Relo
Yeoman Generator简化自定义Chrome DevTools主题开发
资源摘要信息:"该资源是针对已弃用的Chrome DevTools主题的Yeoman Generator的介绍和使用指南。Yeoman Generator是一种工具，可以生成项目的基础结构，使得开发者可以快速开始开发新项目。在这个特定的Generator中，...
Node.js-Yeoman工程脚手架可以生成基础微服务项目CRUD代码
08-09
Yeoman 使用了“生成器”（generator）的概念，生成器是自定义的脚本，可以创建特定类型的项目、文件或目录结构。`hookszhang-generator-duiker-cb0b19c` 这个文件很可能是 Yeoman 的一个自定义生成器，由用户或...
精选资源
generator-office:Yeoman生成器，用于构建Microsoft Office相关项目
04-28
与其他Yeoman生成器一样，此生成器仅为Office加载项项目创建文件的脚手架。 您可以选择使用纯HTML，CSS和JavaScript或使用Angular或React创建Office加载项项目，还可以在JavaScript和Typescript之间进行选择。 注意...
yeoman-generator
09-15
Yeoman 提供了一个脚手架工具，可以生成项目的基础结构和文件。开发者可以选择使用已有的模板，也可以自定义模板。Yeoman 还提供了丰富的插件，可以集成其他工具和框架，如 Grunt 或 Gulp。 使用 Yeoman，开发者...
yeoman工具的使用以及自定义脚手架
MoMo@blog
12-14 863
安装yeoman 1.安装yarn sudo: yarn: command not found npm install -g yarn 2.安装yo sudo yarn global add yo 3.安装generator-node sudo yarn global add generator-node 4.新建文件夹 yeoman-test 5.yo node 注意点 yarn 报错超时 unexpected error occurred: “https://registry.yarnpkg.com/y
Yeoman-generator 流行的生成器
代码搬运工
04-01 2535
本篇文章是由Yeoman推进的，开发AngularJS应用上下文中的工作流和自动化构建系统。请确保已安装，node.js，npm，bower，gulp，yo 。 npm安装：下载node.js并安装 bower安装： npm install bower -g 之后安装Git（百度即可） gulp安装： npm install gulp -g yo： npm install yo -g(np
Yeoman-自定义Generator模块
热门推荐
往事不回头,余生不将就
10-11 1万+
前言 自定义generator其实就是自定义一个npm模块，但是generator有特定的目录结构，如下所示 需要注意的是 generator的名字必须是 generator-<name>格式 否则的话 yeoman在工作的时候就找到这个模块 代码演示 //主文件路径 generators→app →index.js 内容如下 //此文件作为generator的核心入口，需要导出一个继承yeoman Generator的类型 // yeomanGenerator在工作时会自动调用.
yeoman构建项目generator（yeoman-generator）
蜗牛不会跑
10-30 3445
前言：在开始一个新项目得时候，如果我们已经有存在得项目，大多数都会借鉴这个项目，包括他的基础配置，以及一些公共的组件。而往往采用的方式都是复制粘贴，如果项目比较复杂，这样做有几个很明显的弊端，一是比较耗时，二是容易出错。即使我们重新构建一个新的脚手架，也需要根据项目的需求做不少的添加更改等等，其实经过简单的分析，在我们的许多项目当中都有很多共性的东西，哪我们有没有一个方法，在每次需开发新项目的时候...
yeoman_通过4个简单的步骤创建自定义Yeoman Generator
culiu9261的博客
07-19 687
yeomanYeoman is one of the web's most popular tooling frameworks with over 400 contributed reusable plugins. The open source project led by Addy Osmani makes project scaffolding an easy step. Yeoman是...
基于Yeoman搭建自己的脚手架-----自定义Generator
杜杜的博客
06-07 277
创建Generator 模块 Generator 本质上就是一个NPM模块，但是Generator 有一个特定结构 首先我们创建一个文件夹当做目录 # mkdir generator-sample # yarn init # yarn add yeoman-generator # code . //打开VScode 然后我们按照按照上面的基础结构创建相应的文件夹 在index js 中可以直接创建 consst Generator =require('yeoman-generator') mod
vs code里面的less插件一直报错_从头开始设计自己的vscode主题插件
weixin_39684454的博客
11-21 427
本文首发于个人博客：https://n0usec.top0x00.缘起折腾是技术宅的美德，作为一个vscode的深度使用者以及一个挑剔的人，vscode扩展商店里的众多主题我都不是很喜欢，唯独有一款名为Darktooth theme的主题我一直很喜欢，它的配色正是我喜欢的风格，而转折发生在使用vscode书写markdown之后，我发现这款主题并不支持markdown的语法高亮，而在扩展商店搜寻许...
Yeoman&generator自定义脚手架
CarrreyYan_979292的博客
09-04 323
制作属于自己 的脚手架 不是cli的脚手架。如果有过兴趣。自己可以使用node.js 中, ？？？？.js 自己写 gennerator 的脚手架方式 yo命令 官网地址：https://yeoman.io/yo yeoman 制作脚手架命令 安装 npm install -g yo yo 命令的作用是制作脚手架命令 yo --version 查看版本号 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200904231954167.png?x-oss-proces
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值