Yeoman

Yeoman 本文档对应版本：v2.0.5

生成器

可以根据模板，自动替换用户在命令行输入的参数，快速生成对应的代码。

创建生成器

已经有很多框架通用的生成器。但针对特定的项目，很多时候自己创建生成器会比较方便。

官方教程

初始化

一个生成器本质上是一个 node 模块。

• 新建文件夹，格式为 generator-<name>，name 为生成器的名称。

• 初始化 package.json

    npm init -y
  

• 安装依赖

    npm i yeoman-generator
  

文件结构与命令

命令

yo name
yo name:router

会自动调用文件结构中的对应模块。（默认会查找./generators下的文件夹）

generator-<name> 文件结构

├───package.json
└───generators/
    ├───app/
    │   └───index.js   // yo name
    └───router/
        └───index.js   // yo name:router

拓展 Generator

以app/index.js为例，通过拓展Generator来加入自定义逻辑。

自定义的方法通常会按顺序被调用一次。

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // 重写构造函数
  constructor(args, opts) {
    super(args, opts);
    this.argument('name', { type: String, required: true });
  }

  // 添加方法
  method1() {
    this.log('method 1 just ran');
  }

  method2() {
    this.log('method 2 just ran');
  }

}

本地运行

在模块根目录中，链接到全局模块

npm link

就可以运行刚才的 generator-name 了

yo name

基于模板生成（多个）文件

可以利用模板初始化组件和页面的基础文件，快速完成准备工作。模板支持变量替换，在复制时会自动替换<%= variable %>。

./index.js

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  constructor(args, opts) {
    super(args, opts);
    this.argument('name', { type: String, required: true });
  }

  write() {
    this.log('Writing');

    const name = this.options.name;
    const nameHyphened = name.replace(/\B[A-Z]/, match => '-' + match.toLowerCase())
    const variables = { name, nameHyphened };

    const files = ['index.js', 'index.less', 'index.pug', 'index.json'];
    files.forEach(file => {
      this.fs.copyTpl(
        this.templatePath(file),
        this.destinationPath(`./${name}/${file}`),
        variables,
      );
    })
    this.log('Writing finished');
  }
}

./template/index.pug 为例

view.<%= nameHyphened %>
  view <%= name %>

运行上下文环境

用户交互

组合

管理依赖

与文件系统交互

存储用户配置

单元测试

调试

集成