将 Yeoman 提示拆分为多个单独的组

Question

如何将 yeoman 提示拆分成多个部分？我有一个相当长的提示，我想分成几个部分，每个部分都有一个标题。

CSS
- prompt1

HTML
-prompt 2

像这样：

prompt1: function(){
  var done = this.async();
  condole.log('title 1');
  var prompts = [{
      name: 'prompt1',
      message: 'Prompt 1:',
    }]
},


prompt2: function(){
  var done = this.async();
  condole.log('title 2');
  var prompts = [{
      name: 'prompt2',
      message: 'Prompt 2:',
    }]
},

谢谢！

Answer 1

Update 正如@Deimyts 在评论中指出的那样，原始代码停止工作。这是由于 API Inquirer.JS documented here.

的变化

The base API interface is now inquirer.prompt(questions).then(). There's no more callback function.

Any async question functions is taking a promise as return value instead of requiring this.async().

简而言之，不是使用旧的 var done = this.async() API 而是使用 done() 解决回调中的提示只是 return 来自 [=16] 的承诺=] 函数 (see docs).

prompt1: function() {
  this.log("HTML")
  return this.prompt([
      // configure prompts as before
    ]).then(function (answers) {
      // callback body as before, but no more calling done()
  }.bind(this));
},

有关详细信息，请参阅下面的@Deimyts 回答。

Yeoman 使用具有某些预定义优先级的运行循环，您可以使用这些优先级来执行操作。正如 ☞ docs 中提到的，您可以将多个方法分组为一个优先级。这是一个片段，用于说明生成器，提示分为两组 HTML 和 CSS:

'use strict';

var generators = require('yeoman-generator');

module.exports = generators.Base.extend({

  constructor: function () {
    generators.Base.apply(this, arguments);
  },

  prompting: {
    prompt1: function() {
      this.log("HTML")
      var done = this.async();
      this.prompt([{
          type    : 'input',
          name    : 'foo',
          message : 'Foo',
        }, {
          type    : 'input',
          name    : 'bar',
          message : 'Bar'
        }], function (answers) {
          this.foo = answers.foo;
          this.bar = answers.bar;
          done();
        }.bind(this));
    },

    prompt2: function() {
      this.log("CSS")
      var done = this.async();
      this.prompt([{
          type    : 'input',
          name    : 'bam',
          message : 'Bam',
        }], function (answers) {
          this.bam = answers.bam;
          done();
        }.bind(this));
    }
  },

  configuring: function () {
    console.log(this.foo, this.bar, this.bam);
  }
});

使用 Yeoman 的这个功能，您可以进一步模块化您的代码，例如通过将不同的提示放在单独的代码文件中，并将 require / import 它们放入生成器文件中。但基本上上面的代码片段应该可以解决问题。

如果有帮助请告诉我。

Answer 2

在我对示例代码进行了几处修改之前，之前的答案对我不起作用。

我不能 100% 确定，但我相信差异可能是由于 yeoman-generator 模块的不同版本造成的。所以，我在这里记录下来，以防其他人运行遇到同样的问题。

作为参考，我正在使用 yeoman-generator v0.23.4、yo v1.8.4、node v6.2.2 和 npm v3.9.5。

修改：

删除 var done = this.async(); 和 done() 的所有实例。

async() 函数导致生成器在 prompt1 之后退出，而从未运行 prompt2 或 configuring 函数。
在调用this.prompt()之前添加return；

删除 async() 会导致生成器在不等待回答的情况下匆忙完成提示。添加 return 修复此问题。
将this.prompt()里面的回调函数替换成.then()。

在进行此更改之前，生成器会运行正确地通过提示，但不会保存答案，并且 configuring 只会记录 undefined undefined undefined.

原文： this.prompt(prompts, callback(answers).bind(this))

修订：this.prompt(prompts).then(callback(answers).bind(this));

完整示例：

'use strict';

var generators = require('yeoman-generator');

module.exports = generators.Base.extend({

  constructor: function () {
    generators.Base.apply(this, arguments);
  },

  prompting: {
    prompt1: function() {
      this.log("HTML")
      return this.prompt([{
        type    : 'input',
        name    : 'foo',
        message : 'Foo',
      }, {
        type    : 'input',
        name    : 'bar',
        message : 'Bar'
      }]).then(function (answers) {
        this.foo = answers.foo;
        this.bar = answers.bar;
      }.bind(this));
    },

    prompt2: function() {
      this.log("CSS")
      return this.prompt([{
        type    : 'input',
        name    : 'bam',
        message : 'Bam',
      }])
      .then(function(answers) {
        this.bam = answers.bam;
      }.bind(this));
    }
  },

  configuring: function () {
    console.log(this.foo, this.bar, this.bam);  
    console.log('Config: ', this.config);
  },
});

将 Yeoman 提示拆分为多个单独的组

Splitting Yeoman prompts into multiple separate groups

yeoman

yeoman-generator

修改：

完整示例：