创建Npm脚手架
1工具
l Npm ( https://nodejs.org/en/ )
l Yeoman (npm install -g yo)
l generator-generator (npm install -g generator-generator)
备注说明:
- yo是Yeoman的命令行工具包,需要全局安装
- generator-generator就是generator的generator,需要全局安装
- 将npm的镜像调整为国内,命令如下npm config set registry=http://registry.npmjs.org
- 注册一个npm的账号,密码,邮箱(有可能需要翻墙,蓝灯试试)
2操作步骤
- 创建一个脚手架的基础版本.创建一个空的文件夹,命名为CLI,在此文件夹下进入命令行状态,再命令行中输入yo generator
2.输入对应的配置信息之后,代码会帮助我们自动创建一个脚手架的基础版本.生成的代码结构如下:
3.将需要生成脚手架的代码,放置到app/templetes下,并修改app/index.js文件,在write方法添加新的复制文件的路径.
4.初始化项目,加载依赖包.切换到项目下,输入命令npm install
5.将这个脚手架链接到本地,在本地测试,看看是否可行
npm link // 如果提示权限问题请使用sudo npm link
若此命令没有抱任何的错误,此时脚手架已经可以本地使用了。
在本地创建一个项目目录,进入该目录,尝试使用该脚手架,比如现在脚手架项目名称为generator-weminiapp,命令行中应该去掉脚手架项目的前缀“generator-”来运行:yo weminiapp
命令会根据设定的提示和输入信息,Yeoman会一步一步安装你的项目文件,最终生成你指定的项目结构。
效果如下:
6.发布脚手架到npm
1》 若是没有npm账号,则可以通过npm adduser来创建
2》 若是已有npm账号,则可以通过npm login来发布,命令行操作如下:
3》 输入Npm publish命令,进行上传发布,成功的提示如下:
3部署
登录npm,查看项目是否上传成功. 具体网址如下: https://www.npmjs.com
点击generator-weminiapp,进入查看项目信息.具体信息如下
4测试
新创建一个纯空的文件夹,下载代码.
创建Npm脚手架的更多相关文章
- 如何创建NPM包并上传
1 在NPM网站上注册,并验证(verify)自己的邮箱 https://www.npmjs.com 2 用命令行定位到你的库文件夹 3 在命令行里登录npm, 按提示依次输入用户名 密码 注册邮箱 ...
- 创建简单的npm脚手架
前言 vue-cli, webpack-cli 等脚手架是不是用起来爱不释手?自己写了个模版每次来回复制粘贴代码是不是很难维护?如果你是对前端.Node操作有一定的了解,同时也存在以上疑问,那就请尽情 ...
- 从零开始制作cli工具,快速创建项目脚手架
背景 在工作过程中,我们常常会从一个项目工程复制代码到一个新的项目,改项目配置信息.删除不必要的代码. 这样做的效率比较低,也挺繁琐,更不易于分享协作. 所以,我们可以制作一个cli工具,用来快速创建 ...
- 创建React脚手架
node版本10.14.2 下载地址 如果是其版本的话会出错 css-loader 会不兼容 主要是8.x的版本不兼容 npm install -g create-react-app 全局安装 cre ...
- 创建vue脚手架步骤
一.在cmd配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org 二.仅第一次执行安装,安装好后关掉cmd后再开,这个时候 ...
- 搭建vue.js 的npm脚手架
1.在cmd中,找到nodeJs安装的路径下,运行 vue -V,查看当前vue版本,如下图所示,表明已经安装过了. 2.没有安装,进行安装.在cmd中,找到nodeJs安装的路径下,运命令行 npm ...
- 为什么我不推荐你使用vue-cli创建脚手架?
最近在知乎看到一个问题,原问题如下: "很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建 ...
- 使用yeoman搭建脚手架并发布到npm
前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...
- 创建并发布npm包
1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...
随机推荐
- SSM框架之Spring(5)JdbcTemplate及spring事务控制
Spring(5)JdbcTemplate及spring事务控制 ##1.JdbcTmeplate 它是 spring 框架中提供的一个对象,是对原始 Jdbc API 对象的简单封装.spring ...
- [browser navigator],写了个检测游览器版本
前些天胃不舒服打吊针了,真得准时吃饭各种啊,然后就是懒,就没在复习了,这次复习的内容是navigator //未知效果 // console.log('浏览器的次要版本' + navigator.ap ...
- Windows应急日志常用的几个事件ID
Windows应急日志常用的几个事件ID点击站内没有搜索到,可能搜索姿势不对,发一下吧,应急时可能会用到,根据日志时间点判断入侵 日志路径:C:\Windows\System32\winevt\Log ...
- 【JDBC】JDBC入门
JDBC的入门 搭建开发环境 编写程序,在程序中加载数据库驱动 建立连接 创建用于向数据库发送SQL的Statement对象 从代表结果集的ResultSet中取出数据 断开与数据库的连接,并释放相关 ...
- 个人项目-WC(C/C++ 兼容Linux和Windows)
一.Github地址 https://github.com/S-TRAVELER/WC 实现的功能: 支持 -c 支持 -w 支持 -l 支持 -s 支持 -a 图形界面 多参数(文件名或通配符表达式 ...
- 初级模拟电路:3-9 BJT三极管实现逻辑门
回到目录 BJT晶体管可以实现逻辑门,事实上,在场效应管被发明用于集成电路以前,各种逻辑门芯片中的电路就是用BJT晶体管来实现的.最早人们使用二极管与BJT组合来实现逻辑门,这个称为二极管-晶体管逻辑 ...
- acwing 60. 礼物的最大价值
地址 https://www.acwing.com/problem/content/56/ 在一个m×n的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于0). 你可以从棋盘的左上角开始拿 ...
- 算法问题实战策略 SORTGAME
地址 https://algospot.com/judge/problem/read/SORTGAME 解答 常规BFS是会超时的 按照书上的提示 应该是打表(居然还有提倡打表的题目) tle 代码 ...
- vue 指令和修饰符
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...
- Java面试题的个人总结
面试总结 第一轮:电话初面 第二轮:技能面谈[技能职位尽量避免多谈处理上的作业] 第三轮:高管复试 第四轮:HR终究供认 一面:首要供认对阿里的意向度(假定异地更会考虑对作业地址(杭州)的意向度!阿里 ...