自己制作脚手架——完整版

如何制作属于自己的脚手架——一看就会系列

需要一些辅助网站,网址如下:

yeoman:https://yeoman.io/

一、全局安装命令工具:yo 用于制作脚手架

cmd打开命令行:

安装命令:npm install -g yo
自己制作脚手架——完整版

【检测版本号:yo --version】

同样是在cmd命令行

安装命令:npm install -g generator-generator
自己制作脚手架——完整版

二、安装生成脚手架工具

新建一个文件夹,命名为 generator,在VScode中运行这个文件夹,并在终端中打开

在终端运行以下命令:

生成脚手架目录:yo generator
自己制作脚手架——完整版

上面的选项不是必填项,可以直接回车,出现以下的图案说明脚手架安装成功。此时,文件夹【gennerator】下将会出现脚手架【generator-shop-generator】
自己制作脚手架——完整版

自己制作脚手架——完整版

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

将自己的工程代码导入generator-shop-generator下的templates中,并将templates文件下原有的dummyfiles.txt删除。

首先在generator-shop-generator文件下下的generators文件夹下找到index.js文件

将name的值改为confirm,再将templatePath改为:’**’,destinationPath改为:’./’
自己制作脚手架——完整版
自己制作脚手架——完整版

完成了以上步骤后,需要打开generator-shop-generator下的package.json文件,将版本号改成1.0.0
自己制作脚手架——完整版

四、本地测试脚手架

在generator-shop-generator文件夹中打开终端,输入以下命令:npm link
自己制作脚手架——完整版

新建一个目录demo,并在终端打开

输入命令:yo shop-generator
自己制作脚手架——完整版
自己制作脚手架——完整版

此时你的文件夹目录就会安装到demo上
自己制作脚手架——完整版

五、将测试成功的脚手架发布到npm上

在generator-shop-generator文件夹中打开终端,输入以下命令:

登录用户:npm login

发布脚手架:npm publish
自己制作脚手架——完整版

发布成功后可以在npm 官网上搜索自己上传的脚手架

自己制作脚手架——完整版

六、下载安装自己的脚手架

新建文件夹test,并在终端打开
输入命令:npm i generator-shop-generator
自己制作脚手架——完整版

安装成功:
自己制作脚手架——完整版

到此为止,完整的步骤就结束了。