脚手架 - 用Yeoman生成一个自己的项目框架

慕凌龙

2023-12-01

项目网址: generator-mysample: 用Yeoman生成自己项目框架的生成器项目

一. Yeoman简介

Yeoman是一个通用的脚手架工具（比vue-cli、create-react-app等更加灵活通用，不限制于某种开发语言或框架。）

它可以帮助开发人员快速构建web应用程序的工具和框架。

Yeoman可以定义项目生成模块（Generator），再通过执行生成模块来生成项目。

定义一个Generator模块，实质上就是定义一个npm模块。

二. 用Yeoman生成一个自己的项目框架

## Geneator项目的目录结构：

-generators 生成器目录

--app 默认生成器目录

---index.js 默认生成器实现

--component 其它生成器目录

---index.js 其它生成器实现

-package.json 模块包配置文件

ps: yeoman的Generator生成器模块命名格式：generator-<name>，使用时直接运行：yo <name> 生成项目。

## 用yeoman定义一个简单的生成器，用于生成一个文件

1. 项目根目录下初始化package.json:

yarn init

2. 安装yeoman-generator ，其提供了生成器模块的基类：

yarn add yeoman-generator

pacakge.json文件内容：

{
  "name": "generator-mysample",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://gitee.com/big-right-right/generator-mysample.git",
  "author": "252057460@qq.com",
  "license": "MIT",
  "dependencies": {
    "yeoman-generator": "^4.12.0"
  }
}

3. 项目根目录下创建generators/app/index.js:

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 这里我们将在项目目录中写入文件
    this.fs.write(
      this.destinationPath('temp.txt'),
      Math.random().toString()
    )
  }
}

4. 用yarn link命令，将本模块放入yarn内存，成为一个全局可用的模块包：

yarn link

5. 然后进入想要执行该生成器的目录，执行该生成器：

yo mysample

执行之后，就可在其目录下得到由yeoman生成器 mysample 生成的 temp.txt 文件。

## 用yeoman定义一个生成器，可根据用户输入（name success），来根据模板生成文件

1. 在 generators/app 文件夹下新建templates目录，其下放置如下两个模板文件：

因后续要接收用户输入的name和success，故需要把模板文件中所有用到用户输入之处，使用ejs语法标识。

ps：对于html模板中的：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

由于其和ejs语法相同，则写成这种格式即可：

<link rel="icon" href="<%%= BASE_URL %>favicon.ico">

模板文件一 bar.html:

<!DOCTYPE html>
<html>
  <head>
    <title><%= name %></title>
  </head>
  <body>a project </body>
</html>
</html>

模板文件二 foo.txt:

本foo.txt是一个模板文件
内部可以使用 EJS 模板标记输出数据
例如：<%= name %>
      <% if(success){ %>
        呵呵哒
      <% } %>

2. 修改 generators/app/index.js 文件的内容为如下：

// 本文件是 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型方法中定义的一些生命周期方法
// 在这些方法中可以通过调用父类提供的一些工具方法实现我们想要的功能，比如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  // 3 接收用户输入
  prompting() {
    // yeoman 在询问用户环节会自动调用此方法
    // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname // 项目生成目录的名称
      }
    ]).then(answers => {
      // answers => { name: 'user input value }
      this.answers = answers
    })
  }
  
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法

    // 1 写入文件到目标目录
    /* this.fs.write(
      this.destinationPath('temp.txt'),
      Math.random().toString()
    ) */


    // 2 通过模板方式写入文件到目标目录
    // 模板文件路径
    /* const tmp = this.templatePath('foo.txt')
    // 输出模板路径
    const output = this.destinationPath('foo.txt')
    // 模板数据上下文
    const context = { title: 'Hello shuang~', success: true }
    this.fs.copyTpl(tmp, output, context) */


    // 3 接收用户输入
    const tmp = this.templatePath('bar.html')
    // 输出模板路径
    const output = this.destinationPath('bar.html')
    // 模板数据上下文
    const context = this.answers
    this.fs.copyTpl(tmp, output, context)
  }
}

3. 在需要的生成文件的目录下，执行生成器:

yo mysample

执行后，就可以在其目录下，看到已经生成的两个文件：

bar.html:

<!DOCTYPE html>
<html>
  <head>
    <title>test001</title>
  </head>
  <body>a project </body>
</html>
</html>

foo.txt:

本foo.txt是一个模板文件
内部可以使用 EJS 模板标记输出数据
例如：test001
      
        呵呵哒

本文完。