4、Yeoman 与用户交互

自定义的Generator将与最终用户进行很多交互。默认情况下，Yeoman在Terminal上运行，但它也支持由不同工具提供的自定义用户UI。

为了实现这种灵活性，Yeoman提供了一组用户界面元素抽象。作为作者的责任是在与最终用户进行交互时仅使用这些抽象。使用其他方式可能会阻止Generator在其他Yeoman工具中正常运行。

例如，千万不要使用console.log() 或process.stdout.write() 输出内容，这一点很重要。不使用终端的用户看不到输出内容。相反，请始终依赖于UI通用的this.log()方法，这是当前生成器的上下文。

4.1 用户交互

提示

提示是Generator与用户交互的主要方式。提示模块由Inquirer.js提供，应该参考API获得可用的提示选项的列表。

提示方法是异步的，并返回Promise。需要从任务中返回Promise，以便在完成下一个任务之前等待其完成。（了解有关异步任务的更多信息）

module.exports = class extends Generator {
  async prompting() {
    const answers = await this.prompt([
      {
        type: "input",
        name: "name",
        message: "Your project name",
        default: this.appname // Default to current folder name
      },
      {
        type: "confirm",
        name: "cool",
        message: "Would you like to enable the Cool feature?"
      }
    ]);

    this.log("app name", answers.name);
    this.log("cool feature", answers.cool);
  }
};

注意，这里定义了我们使用的提示队列，要求从用户处反馈。

后续使用用户答复

一种非常常见的方案是在后续阶段使用用户答案，例如：在写队列中。可以通过将它们添加到此上下文中来轻松实现：

module.exports = class extends Generator {
  async prompting() {
    this.answers = await this.prompt([
      {
        type: "confirm",
        name: "cool",
        message: "Would you like to enable the Cool feature?"
      }
    ]);
  }

  writing() {
    this.log("cool feature", this.answers.cool); // user answer `cool` used
  }
};

记住用户偏好

用户可能在每次运行Generator时都反馈相同的答案。对于这些问题，可能想记住用户先前回答的内容，并将该答案用作新的默认值。

Yeoman通过向问题对象添加store属性来扩展Inquirer.js API。此属性允许指定将用户提供的答案用作默认答案。可以按照以下步骤进行：

this.prompt({
  type: "input",
  name: "username",
  message: "What's your GitHub username",
  store: true
});

注意：提供默认值将防止用户返回任何空答案。

如果只是想存储数据而没有直接与提示绑定，请确保签出Yeoman存储文档。

参数

参数直接从命令行传递：

yo webapp my-project

在这个例子中，my-project是第一个参数 

为了通知系统我们需要一个参数，我们使用this.argument() 方法。 此方法接受名称（字符串）和选项Hash表（可选）。

name参数将以以下形式提供：this.options [name]。

选项Hash接受多个键值对：

• desc 参数说明
• required 是否必填
• type String, Number, Array (也可以是一个自定义函数，它接收原始字符串值并进行解析)
• default 参数默认值

必须在构造方法内部调用此方法。否则，当用户使用帮助选项访问Generator时，Yeoman将无法输出相关的帮助信息。

例如：

module.exports = class extends Generator {
  // note: arguments and options should be defined in the constructor.
  constructor(args, opts) {
    super(args, opts);

    // This makes `appname` a required argument.
    this.argument("appname", { type: String, required: true });

    // And you can then access it later; e.g.
    this.log(this.options.appname);
  }
};

Array类型的参数将包含传递给Generator的所有剩余参数。

Options

选项看起来很像参数，但是它们被写为命令行标志。

yo webapp --coffee

为了通知系统我们需要一个选项，我们使用this.option()方法。 此方法接受名称（字符串）和选项Hash表（可选）。

The name value will be used to retrieve the option at the matching key this.options[name].

名称值将用于在匹配键this.options [name]处检索选项。

选项Hash接受多个键值对：

• desc 参数说明
• alias 选项的简称
• type  Boolean, String或Number (也可以是一个自定义函数，它接收原始字符串值并进行解析)
• default 默认值
• hide  是否对Help隐藏（bool）

例如：

module.exports = class extends Generator {
  // note: arguments and options should be defined in the constructor.
  constructor(args, opts) {
    super(args, opts);

    // This method adds support for a `--coffee` flag
    this.option("coffee");

    // And you can then access it later; e.g.
    this.scriptSuffix = this.options.coffee ? ".coffee" : ".js";
  }
};

4.2 输出信息

输出信息由this.log模块处理。

您将使用的主要方法就是this.log（例如this.log（'欢迎使用生成器'）。 它接收一个字符串并将其输出给用户； 基本上，它在终端会话中使用时模仿console.log()。 您可以这样使用它：

module.exports = class extends Generator {
  myAction() {
    this.log("Something has gone wrong!");
  }
};

如需其它信息，可以参考API文档