javascript - 使用 Yeoman 生成器重复提示

Question

我正在创建一个 Yeoman 生成器来自动创建一些数据库表。我需要向用户提供添加多列的提示(下面的 ColumnName 和 DataType 的组合)。

我的磁盘中保存了一个模板，我在其中绑定(bind)了用户输入的动态名称，并基于此模板，最终脚本由 Yeoman Generator 生成。你能建议如何提示用户输入他想输入的 ColumnName/DataType 的重复组合吗？

var prompts = [{
    type: 'input',
    name: 'name',
    message: 'The Table Name?'
  }, {
    type: 'input',
    name: 'attributeName',
    message: 'Define your Schema - ColumnName?',
    default: 'ID'
  },{
    type: 'input',
    name: 'attributeType',
    message: 'Define your Schema - DataType?',
    default: 'S'
  }
];


  return this.prompt(prompts).then(function (props) {
    this.props = props;
  }.bind(this));

模板内容-- 用户可以输入 1/2/3/4 或更多列的详细信息，一旦他这样做，下面的模板应该足够智能以创建那么多列键组合。

{
  "Type" : "AWS::Table",
  "Properties" : {
    "AttributeDefinitions" :  
          {
            "AttributeName" : "<%= attributeName %>",
            "AttributeType" : "<%= attributeType %>"
          },
          {
            "AttributeName" : "<%= attributeName %>",
            "AttributeType" : "<%= attributeType %>"
          },
    "TableName" : <%= name %>,

    }
}

Answer 1

您可以在 prompting() Hook 中添加递归函数。必须确保递归函数返回 this.prompts 否则执行可能会停止。

我的策略如下所示

• 声明一个基于输入之一重复的递归函数

• 在 this.columns

中递归时填充 props

• 在writing() hook中将这个实例变量传递给模板

• 遍历模板中的 this.columns 并填充您的列

• this.columns 中的第一个条目将包含表名和第一列详细信息

检查下面的代码，只要按预期调用递归函数，您就可以根据需要调整它。

有一个额外的提示，询问是否重复。它也可以通过一些逻辑被丢弃，但这取决于你。

提示()

prompting() {
  // Have Yeoman greet the user.
  this.log(yosay(
    'Welcome to the remarkable ' + chalk.red('generator-react-starter-kit-relay-container') + ' generator!'
  ));

  const tableNamePrompt = [{
    type: 'input',
    name: 'name',
    message: 'The Table Name?'
  }];

  const columnPrompts = [{
    type: 'input',
    name: 'attributeName',
    message: 'Define your Schema - ColumnName?',
    default: 'ID'
  }, {
    type: 'input',
    name: 'attributeType',
    message: 'Define your Schema - DataType?',
    default: 'S'
  }, {
    type: 'confirm',
    name: 'repeat',
    message: 'Do you want to add more columns?',
    default: 'Y'
  }]

  this.columns = [];

  const loop = (relevantPrompts) => {
    return this.prompt(relevantPrompts).then(props => {
      this.columns.push(props);

      return props.repeat ? loop(columnPrompts) : this.prompt([]);

    })
  }

  return loop([...tableNamePrompt, ...columnPrompts]);
}

然后在 writing() 钩子(Hook)中传递您之前填充的 columns 实例变量。

写作()

writing() {
  this.fs.copyTpl(
    this.templatePath('Schema.json'),
    this.destinationPath('./Schema.json'),
    {
      columns: this.columns
    }
  );
}

模板

{
  "Type" : "AWS::Table",
  "Properties" : {
    "AttributeDefinitions" : [
      <% for (let i=0; i<columns.length; i++) { %>
        {
          "AttributeName": "<%= columns[i].attributeName %>",
          "AttributeType": "<%= columns[i].attributeType %>"
        }
      <% } %>
    ],
    "TableName" : "<%= (columns[0] || {}).name %>"
  }
}

样本输入

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │        remarkable        │
   `---------´   │ generator-react-starter- │
    ( _´U`_ )    │    kit-relay-container   │
    /___A___\   /│        generator!        │
     |  ~  |     ╰──────────────────────────╯
   __'.___.'__   
 ´   `  |° ´ Y ` 

? The Table Name? User
? Define your Schema - ColumnName? ID
? Define your Schema - DataType? Bigint
? Do you want to add more columns? Yes
? Define your Schema - ColumnName? Email
? Define your Schema - DataType? String
? Do you want to add more columns? Yes
? Define your Schema - ColumnName? Password
? Define your Schema - DataType? Text
? Do you want to add more columns? No

输出

{
  "Type" : "AWS::Table",
  "Properties" : {
    "AttributeDefinitions" : [

        {
          "AttributeName": "ID",
          "AttributeType": "Bigint"
        }

        {
          "AttributeName": "Email",
          "AttributeType": "String"
        }

        {
          "AttributeName": "Password",
          "AttributeType": "Text"
        }

    ],
    "TableName" : "User"
  }
}