学习1.2版本之 Generator 根据模板创建文件

「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」

前言

有的时候我们需要自动去创建的文件有很多，而且呢文件的内容也相对复杂，这样我们就可以根据模板来进行创建文件，这样就可以更加便捷，节省很多时间。

创建一个目录

1. 我们先创建一个 templates 文件夹，用于收纳模板文件

2. 首先，我们要知道如何创建一个合格的模板，在Yeoman Generator中，模板是可以使用EJS模板语法，那就是说：

   • 我们可以通过

   <%= title %>
   

   这样的方式来动态的输出数据

   • 也可以用如下的方法进行判断

    <% if (success) { %>
       哈哈哈
    <% } %>
   

   详细请看：(EJS官网)[ejs.bootcss.com/]

3. 我们写入文件就可以不用使用 fs.write写入，而是使用fs.copyTpl方法

   fs.copyTpl这个方法接受三个参数（模板文件路径：，输出目标路径，模板数据上下文）

   • 模板文件路径： this.templatePath('foo.txt')去进行获取
   • 输出目标路径： this.destinationPath('foo.txt')
   • 模板数据上下文： 简单定义一个对象即可

4. 有了这些了解，那我们稍微改造一下writing方法

 writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 我们这里尝试往项目目录中写入文件
    // this.fs.write(
    //   this.destinationPath('temp.txt'),
    //   Math.random().toString()
    // )
    // 模板文件路径
    const tmpl = this.templatePath('foo.txt')
    // 输出目标路径
    const output = this.destinationPath('foo.txt')
    // 模板数据上下文
    const content = { title: 'Hello world', success: false}
    this.fs.copyTpl(tmpl,output,content)
 }

测试

保存完毕之后，我们在此开启我们的控制台，进入到测试用的文件夹中，运行以下代码：

yo sample

哒哒哒瞪：

获得以下提示：

进入我们的测试文件夹中：

完美，创建也成功了，当然主要的内容也要看看

完美没有问题，渲染的结果也没有问题

代码

foo.txt

这是一个模板文件
内部可以使用 ESJ 模板标记输出数据
例如： <%= title %>

其他的 EJS 语法也支持

 <% if (success) { %>
    哈哈哈
 <% } %>

index.js

const Generator = require('yeoman-generator')
module.exports = class extends Generator {
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 模板文件路径
    const tmpl = this.templatePath('foo.txt')
    // 输出目标路径
    const output = this.destinationPath('foo.txt')
    // 模板数据上下文
    const content = { title: 'Hello world', success: false}
    this.fs.copyTpl(tmpl,output,content)
  }
}

总结

相对于手动创建每一个文件，模板的方式大大提高了效率，特别是文件比较多比较复杂的情况下