学习1.1版本之 Generator 创建文件

403 阅读2分钟

「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

前言

经过上一章的学习,我们要进入Yeoman Generator的简单的入口页面改造了,先回顾一下我们创建好的文件结构吧!

image.png

核心入口页的小小小demo

  1. 我们通过require的方式载入Yeoman Generator
const Generator = require('yeoman-generator')
  1. 我们需要导出一个类型,并让这个类型继承 Generator
module.exports = class extends Generator {
  
}
  1. 接下来我们定义一个 writing方法(Yeoman 自动在生成文件阶段调用此方法)
 writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 我们这里尝试往项目目录中写入文件
    this.fs.write(
      this.destinationPath('temp.txt'),
      Math.random().toString()
    )
  }

ps: 这里的fs模块,与我们在node中用的fs并不一样,这里的fs模块是一个更加高度的封装的模块,相对于原生的fs模块,功能会更强大一点;

fs.write接受两个参数,一个是文件路径(这里的路径我们可以通过父类的destinationPath去自动获取,生成项目目录下的文件路径),一个是写入的内容

  1. 这样一来一个简单的Generator就完成了
  2. 完整代码
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 我们这里尝试往项目目录中写入文件
    this.fs.write(
      this.destinationPath('temp.txt'),
      Math.random().toString()
    )
  }
}

完成之后的测试

这里我们回到我们的命令行,我们可以通过以下的命令,把这个Generator链接到全局的范围,使之成为一个全局模块包,这样的话yeoman在工作的时候,就能找到generator-sample

npm link

yarn link

当然没有的话

# 全局安装 npm install -g yarn

然后在运行一次上面的代码

测试开始

yeomangenerator必须是以generator-name的格式,如果不采用这种格式,yeoman后续就无法找到所定义的generator

ok,回顾了以下以上的定义,开始测试,进入我们事先创建好的my-proj文件夹中

当时我们的命名是 generator-sample,所以我们运行以下代码

yo sample

哒哒哒瞪:

获得以下提示:

image.png 并且进入文件夹中:

image.png 获得了我们设置好的文件,可喜可贺,可喜可贺!

总结

这就是我们的一个基础生成器开发过程