yeoman-generator搭建属于自己的脚手架

241 阅读2分钟

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包

image.png

再在templates下面建立一个package.json,当走到install函数的时候,就会自动下载其依赖.name使用了ejs进行占位数据动态化

image.png

//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中修改版本.

例子:gitee.com/miql/yeoman…