Yeoman(3) 跟用户的交互

跟用户的交互

你的generator会跟最终的用户进行大量的交互.默认的,yeoman是跑在命令行的,但是它也提供的不同的工具来支持特制的用户界面.举例来说,yeoman完全可以跑在一个图形界面或者一个标准程序里

为了让它具备这样扩展性,yeoman提供了一组抽象的用户界面元素.当你跟你的用户交互的时候,你有责任使用这些抽象元素,如果使用其他的方式,可能使得你的generator不能正确运行

举例来说,不要使用console.log()和process.stdout.write()来输出内容.因为如果用户不是用命令行模式,那么输出就看不到了.相应的,应该使用generator.log()来输出,这里的generator是你当前generator的上下文

用户交互

Prompts

Prompts是主要的跟用户交互的方式,它由Inquirer.js模块来提供,你应该查阅它的api来看下可用的选项.

prompt方法是异步的,并且返回一个promise. 你必须在你的任务中返回这个promise,以此保证它的完成之后,才进行下一个任务.

module.exports = generators.Base.extend({
  prompting: function () {
    return 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?'
    }]).then(function (answers) {
      this.log('app name', answers.name);
      this.log('cool feature', answers.cool);
    }.bind(this));
  }
})

注意,这里我们使用prompt队列来询问用户,从而得到来自他们的反馈

记住用户的选择

用户在每次使用你的generator的时候,可能给出的选择是一样的.对于这些问题,你或许应该记住用户上次的选择来作为这些问题的默认的新的答案

yeoman通过增加一个store属性到question对象中来扩展 **Inquirer.js**api,来完成上面说的要求

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

注意:提供一个默认值会阻止用户选择空值
如果你不想用prompt,只在意”store”保存的值,你需要去看看Yeoman storage documentation

命令行参数

直接传在命令行的参数:

yo webapp my-project

在这里,”my-project”是第一个参数

我们使用generator.argument()来告诉系统,我们想要得到一个参数.这个方法的签名是一个表示name的string类型参数,和一个可选的关于选项的对象参数

name以后可以被作为一个getter用,generator[‘name’]
关于选项的对象参数可以接受多个键值对

• desc 对于参数的描述
• required 是否必须
• optional 是否是可选项
• type 类型
• defaults 默认参数

这个方法必须在constructor函数中调用.否则,当用户使用”yo webapp –help”的命令的时候,就得不到相关的帮助信息了

var _ = require('lodash');

module.exports = generators.Base.extend({
  // note: arguments and options should be defined in the constructor.
  constructor: function () {
    generators.Base.apply(this, arguments);

    // This makes `appname` a required argument.
    this.argument('appname', { type: String, required: true });
    // And you can then access it later on this way; e.g. CamelCased
    this.appname = _.camelCase(this.appname);
  }
});

命令行选项参数

命令行参数书写格式上要带上”–”

比如:
yo webapp –coffee

我们使用generator.option()来告诉系统,我们想要得到一个选项参数.这个方法的签名是一个表示name的string类型参数,和一个可选的关于选项的对象参数

name用来搜索在generator.options里的参数
命令行选项参数对象可以接受多个键值对

• desc 描述
• alias 别名,简称
• type 类型
• defaults 默认值
• hide 是否隐藏help信息

module.exports = generators.Base.extend({
  // note: arguments and options should be defined in the constructor.
  constructor: function () {
    generators.Base.apply(this, arguments);

    // This method adds support for a `--coffee` flag
    this.option('coffee');
    // And you can then access it later on this way; e.g.
    this.scriptSuffix = (this.options.coffee ? ".coffee": ".js");
  }
});

输出信息

信息输出是通过generator.log模块来处理的

主要的方法很简单,就是generator.log

generator.log('Hey! Welcome to my awesome generator')

它接受一个字符串,并且输出给用户
在命令行上下文中,它基本就是console.log

module.exports = generators.Base.extend({
  myAction: function () {
    this.log('Something has gone wrong!');
  }
});