使用yeoman搭建脚手架并发布到npm
前言
最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用。
之前在看《前端工程化:体系设计与实践》里面有提到过Yeoman构建脚手架,先入为主,所以就用了Yeoman来搭建自己的脚手架
准备
1,node环境
在终端上运行node -v
,如果显示node版本号,说明已有node环境
2,安装Yeoman工具集
npm install --global yo
复制代码
验证是否已经安装
yo --version
复制代码
创建一个脚手架的基础框架
1,新建一个文件夹,以generator-name命名,其中name是创建的generator的名字。
npm init 初始化项目,在package.json中增加:
// files 名称需和项目目录文件名一致,比如这里的app,项目初始化时便能找到app 下的内容"files": ["app"],"keywords": ["yeoman-generator"],
复制代码
和依赖项
"dependencies": {"chalk": "^2.4.2","glob": "^7.1.3","lodash": "^4.17.11","yeoman-generator": "^3.2.0"}
复制代码
2,新建app文件夹,并新建index.js文件
// 引进yeoman-generator
let Generator = require('yeoman-generator');
module.exports = class extends Generator {
// 安装脚手架时的提问信息prompting(){var questions = [{type: 'input',name: 'projectName',message: '输入项目名称',default: this.appname},{type: 'input',name: 'projectAuthor',message: '项目开发者',store: true,default: ''},{type: 'input',name: 'projectVersion',message: '项目版本号',default: '0.0.1'}]return this.prompt(questions).then(function(answers){for(var item in answers){answers.hasOwnProperty(item) && (this[item] = answers[item]);}}.bind(this));}writing(){// 安装脚手架时复制的内容块的目录this.fs.copy(this.templatePath('module/'),this.destinationPath(''));}
}
复制代码
3,新建templates文件,并把index.js提到的复制内容块的目录下放着你自己的脚手架内容
目录如下:(其中module为你的整个脚手架内容)
连接项目
npm link
复制代码
验证
新建新的项目workpalce,执行yo,如果看到Cms Module说明搭建脚手架成功~
发布到npm上
1,npm注册
在npm上进行注册
2,登录
在控制台上执行npm login,可以看到:
3,发布
在generator-name项目于根目录下执行npm public
发布到npm上
注意:每次进行修改后上传都需要在package.json上修改版本
一般来说,版本分成三部门:a.b.c
- a表示大版本号,一般是项目较大改动的时候修改,a为0的时候,表示项目处于开发阶段。
- b表示功能更新,或者项目模块改动的时候增加。
- c表示小改动,如修bug。
下载npm上的脚手架
1,确保你本地安装了yo
yo --version
复制代码
2,下载
执行npm install -g generator-cms-module
就可以把脚手架放在你自己的yo上
3,引用
在项目上运行yo
,会出现可以看到Cms Module的个人generator,选择并按提示输入信息就可以把该脚手架的代码create到项目里
github
转载于:https://juejin.im/post/5c80bc3451882564071b6e08
使用yeoman搭建脚手架并发布到npm相关推荐
- 一步步教你完成一个自己的脚手架并且发布到npm
相信你一定用过vue-cli或者create-react-app或者你公司自己的脚手架.当我第一次用这些脚手架的时候,会觉得这一定是种很高级的玩意,其实了解过之后就发现,脚手架也并不是多么深奥的东西. ...
- 从搭建脚手架到在npm上发布react组件
从搭建脚手架到在npm上发布react组件 最近公司给公司里架设了私有的npm仓库,相应地也需要一个用来发布react组件用的脚手架,在这个过程中又又又又复习了一下webpack,在这里分享下脚手架搭 ...
- Yeoman - 搭建自己的脚手架
引言 随着前端工程化的理念不断深入,越来越多的人选择使用脚手架来从零到一搭建自己的项目.其中大家最熟悉的就是create-react-app和vue-cli,它们可以帮助我们初始化配置.生成项目结构. ...
- Vue cli3 库模式搭建组件库并发布到 npm
三.规划目录结构 1.创建项目 在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择. $ vue create . 2.调整目录 我们需要一个目录存放组件,一个目录存放示例,按照以下方式 ...
- npm run dev报错_React + TypeScript 从零开发Popup组件并发布到 npm
上篇文章中介绍了如何从 0 到 1 搭建一个 React 组件库架子,但为了一两个组件去搭建组件库未免显得大材小用. 这次以移动端常见的一个组件 Popup 为例,以最方便快捷的形式发布一个流程完整的 ...
- React TypeScript 从零实现 Popup 组件发布到 npm
本文转载自掘金<从0到1发布一个Popup组件到npm>,作者「海秋」. 点击下方阅读原文去点个赞吧! 上篇文章[1]中介绍了如何从 0 到 1 搭建一个 React 组件库架子,但为了一 ...
- 【华为云技术分享】从零搭建一个灰度发布环境
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- vue插件开发、文档书写、github发布、npm包发布一波流
做vue开发,基本的操作会了之后是不是特想撸一撸vue的插件,让自己的代码可(骚)复(骚)用(的).别急,今天和你一起手摸手,哦呸,是手把手,一起撸一管,哦再呸,是封装一个基于vue的支付宝密码弹窗插 ...
最新文章
- 1027. 戴绿帽子的空管
- 变种 背包问题_【朝夕的ACM笔记】动态规划-背包问题
- 15个月纪念,开心!
- 浅谈疫情下的就业形势
- Chrome 控制台console的用法
- DataGridView的单元格内容即时更新方法
- 使用 Spring Boot Security 进行安全控制
- 计算机六级好考吗,计算机六级考什么?
- php中$t=date()函数参数意义及时间更改
- 基于SSM的实验室预约系统
- 使用AIDL挂断电话
- ArcMap中无法添加ArcGIS Online底图的诊断方法
- 第2章:知识表示--实践:Protégé本体构建
- Unity游戏开发经验点滴
- .NetCore获取拼多多平台优惠券
- 怎么求中位数和分位数 概率密度函数_数理统计第四讲(次序统计量续,伽马分布)...
- uwp浏览器java源码_uwp开发:webview模拟安卓浏览器
- 在云计算行业内有什么证书比较有名?受市场认可大?
- Spark安装-环境搭建
- 干货 | 手把手教你搭建一套OpenStack云平台
热门文章
- 谷歌最新财报:平均每天入账5个亿,还是不及预期;皮猜:未来靠云+AI
- PIE SDK影像快速拼接
- VS2013的项目转到VS2010需要修改的
- MySQL5.6 新特性(全局事务标示符(GTID))
- Kooboo CMS - Html.FrontHtml.Position 详解
- 分配委托、匿名委托、委托
- xx学OD -- 消息断点 RUN跟踪(下)
- 干得累死,并不见得老板就待见你?——来自多位专家的见解
- snort完整安装(snort-2.8.3.1)
- Sql2005自动备份并邮件通知状态之二创建维护计划