Yeoman的使用与自定义Generator的创建

安装 yeoman

npm install yo

yarn global add yo

安装Generator

例如

npm install generator-node

npm install generator-webapp

或者使用yarn

yarn global add generator-webapp

其他需求可参考官方文档

官方generators查询

使用对应的generators

使用命令

例如：yo webapp

yo 后跟generator下载的类别name

自定义一个generator

其本质上就是一个npm工具，他的基本结构遵循如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCSkpxNc-1610605403519)(C:\Users\EDZ\AppData\Roaming\Typora\typora-user-images\image-20210114135107110.png)]

新建一个文件夹，文件夹的名字必须是generator-name！
yarn init 进行初始化
yarn add yeoman-generator 下载一个自定义generator 的平台
新建目录：

generators/app/index.js

注意：generators 必须是复数形式
在index.js写代码

 const Generator = require('yeoman-generator')
       // generator 和 核心入口
   module.exports = class extends Generator {
    
    
       // 自动导出生命周期方法
       // 文件写入的功能
       writing() {
    
    
           //     // yeoman 自动调用这个方法
              this.fs.write(         	 //接收两个参数 一个是路径 ，一个是写入内容	   
              		this.destinationPath('test.txt'),
                   Math.random().toString()
                )
       }
   
   }

使用命令 yarn init 进行命令绑定，这样就可以直接在命令行内输入刚刚的自定义的generator 的名字来使用这个generator

使用自定义的generator

新建一个文件夹，用来存放将要生成的文件
使用命令 yo name（这个name就是刚刚创建generator的name）

会发现自动生成了一个文件
在这里插入图片描述

通过模板来创建文件

在刚刚的app文件下创建一个名为templates 的文件夹
新建一个文件foo.txt 作为输出目标

在index.js中编写代码 ( 因为是换了一种方式，所以要改变原来的代码)

const Generator = require('yeoman-generator')
    // generator 和 核心入口
module.exports = class extends Generator {
      
      
    // 自动导出生命周期方法
    // 文件写入的功能
    writing() {
      
      
        // 模板文件的目录
        const tmpl = this.templatePath('foo.txt')
        // 输出目标路径
        const output = this.destinationPath('foo.txt')
        // 模板数据上下文
        const context = {
      
       title: 'Generator ...', success: false }
        this.fs.copyTpl(tmpl, output, context)
    }

}

返回到我们刚刚新建的文件夹，使用命令 yo name

我们可以看到目录中多了一个foo.txt 文件

在这里插入图片描述

同时EJS语法也生效了