「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」
前言
经过上一章的学习,我们要进入Yeoman Generator的简单的入口页面改造了,先回顾一下我们创建好的文件结构吧!
核心入口页的小小小demo
- 我们通过
require的方式载入Yeoman Generator
const Generator = require('yeoman-generator')
- 我们需要导出一个类型,并让这个类型继承
Generator
module.exports = class extends Generator {
}
- 接下来我们定义一个
writing方法(Yeoman 自动在生成文件阶段调用此方法)
writing() {
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
this.fs.write(
this.destinationPath('temp.txt'),
Math.random().toString()
)
}
ps: 这里的fs模块,与我们在node中用的fs并不一样,这里的fs模块是一个更加高度的封装的模块,相对于原生的fs模块,功能会更强大一点;
fs.write接受两个参数,一个是文件路径(这里的路径我们可以通过父类的destinationPath去自动获取,生成项目目录下的文件路径),一个是写入的内容
- 这样一来一个简单的
Generator就完成了 - 完整代码
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
然后在运行一次上面的代码
测试开始
yeoman的generator必须是以generator-name的格式,如果不采用这种格式,yeoman后续就无法找到所定义的generator
ok,回顾了以下以上的定义,开始测试,进入我们事先创建好的my-proj文件夹中
当时我们的命名是 generator-sample,所以我们运行以下代码
yo sample
哒哒哒瞪:
获得以下提示:
并且进入文件夹中:
获得了我们设置好的文件,可喜可贺,可喜可贺!
总结
这就是我们的一个基础生成器开发过程