制作属于自己的脚手架(图文详解)

制作属于自己的脚手架(图文详解)

yo命令

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

yeoman 制作脚手架命令

安装

npm install -g yo

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

yo --version 查看版本号

制作属于自己的脚手架(图文详解)_第1张图片

制作脚手架

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

npm install -g generator-generator

制作属于自己的脚手架(图文详解)_第2张图片

生成脚手架工具

yo gennerator-脚手架名称

制作属于自己的脚手架(图文详解)_第3张图片

制作中配置项目解释

制作属于自己的脚手架(图文详解)_第4张图片

脚手架创建成功

制作属于自己的脚手架(图文详解)_第5张图片

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

1更改pack.json文件中version

制作属于自己的脚手架(图文详解)_第6张图片

2更改入口文件index.js中部分配置
制作属于自己的脚手架(图文详解)_第7张图片

3开始导入自己的工程代码

制作属于自己的脚手架(图文详解)_第8张图片

导入完成效果

制作属于自己的脚手架(图文详解)_第9张图片

本地测试脚手架是否

cd generator-shop-generator

npm link

在这里插入图片描述

随便新建一个文件目录(模拟使用脚手架生项目工程)

制作属于自己的脚手架(图文详解)_第10张图片

查看脚手架运行过程结果

制作属于自己的脚手架(图文详解)_第11张图片

发布脚手架

如果不会请自行百度

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

npm login 使用命令登陆到npm

制作属于自己的脚手架(图文详解)_第12张图片

开始发布

npm publish

制作属于自己的脚手架(图文详解)_第13张图片

测试发布,并从npm 上使脚手架
  • 去npm官网搜索 generator-shop-generator

制作属于自己的脚手架(图文详解)_第14张图片

  • 在本地安装自己的脚手架

npm i generator-shop-generator

制作属于自己的脚手架(图文详解)_第15张图片

  • 使用脚手架生成项目

yo shop-generator

制作属于自己的脚手架(图文详解)_第16张图片

你可能感兴趣的:(制作属于自己的脚手架(图文详解))