自定义的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文档
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 |