yeoman是一个脚手架工具,但是相对于vuecli脚手架来说是更通用些。让我们可以定义属于自己的脚手架工具.要想搭建自己的脚手架,我们就要先学会自定义Generator
Generator(生成器):
yeoman中的生成器,在我的理解就是一个模板,就像vuecli一样,我们可以询问用户项目名称等信息.之后会生成我们预定义的目录结构.然后在去下载我们需要依赖.也就是说Generator可以省去常用的配置,让我们更注重业务
yeoman-generator是一个可以让我们快速实现generator的工具类,他封装了一些我们常用的方法
官网地址:Writing Your Own Yeoman Generator | Yeoman
定义Generator准备工作:
命令和命名:
npm i yeoman-generator
npm i yo -g(需要使用yo来调用generator)
创建一个文件夹,然后该文件夹的命名格式必须要generator-你自定义的name,然后对其进行npm init -y(yarn)安装依赖
目录结构:
├───package.json
└───generators/
├───app/
│ └───index.js
└───router/
└───index.js
code:
询问获取信息:
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
//按顺序执行,1.询问获取信息,2.生成文件,3.安装依赖
//Yeoman在询问用户环节会自动调用此方法
prompting(){
//可以调用父类的prompt方法发出对用户的命令行询问
return this.prompt([
{
type:'input',
name:'name',
message:'请输入你的项目名称',
default:this.appname // appname为项目生成目录的名称
},
{
type:'input',
name:'phone',
message:'请输入你的仓库地址',
default:'http://'
}
])
.then(answers => {
//这个是generator封装的打印方法,处理兼容
this.log(answers);
this.answers = answers
})
}
}
生成目录结构:
生成预定义项目结构,首先如图所示建立templates包
再在templates下面建立一个package.json,当走到install函数的时候,就会自动下载其依赖.name使用了ejs进行占位数据动态化
//Yeoman自动在生成文件阶段调用此方法(生成预定义项目结构)
writing(){
//获取模板路径
let srcDir = this.sourceRoot()
//目标的目录
let destDir = this.destinationRoot()
//遍历srcDir的目录把所有文件都拷贝到destDir,ejs占位的数据就从第三个参数读取
this.fs.copyTpl(srcDir,destDir,this.answers)
//添加依赖
this.addDependencies({"axios":"^0.27.2"})
}
安装依赖:
install(){
//使用npm安装依赖
this.env.options.nodePackageManager = 'npm'
}
自此,一个generator就搭建完成
之后在generator文件夹下cmd输入yarn link 或者 npm link.然后在去空文件夹下面用yo 来执行generator即可,不需要你yo generator-name,只需要yo name即可
如果已经发布到npm,然后对generator做了更新并发布,请一定要记住,在package.json中修改版本.