yeoman - 包括基于用户选择的依赖项

Question

我目前正在构建一个 Yeoman 生成器，虽然我似乎已经掌握了基础知识，但我正在努力弄清楚如何仅在用户选择包含各种依赖项时才包含它们。

在查看了一些现有的生成器之后，我发现复选框提示是允许用户选择他们想要在新应用程序中包含哪些依赖项的标准方式:

var prompts = [{
  type: 'checkbox',
  name: 'features',
  message: 'What more would you like?',
  choices: [{
    name: 'Sass',
    value: 'includeSass',
    checked: true
  }, {
    name: 'Bootstrap',
    value: 'includeBootstrap',
    checked: true
  }, {
    name: 'Modernizr',
    value: 'includeModernizr',
    checked: true
  }]
}];

但从现在开始，我就陷入了困境。我想要的是允许用户使用 Bower 和 NPM(通过 package.json 文件)选择他们想要包含的依赖项。

我该如何去做呢？

预先感谢您的帮助!

Answer 1

确保只包含用户需要的依赖项是一个很好的做法!

最简单的方法-也是方法the official generators do it - 是使package.json您正在生成一个模板。然后，模板可以包含任意条件来混合和匹配您需要的包。

第一步是从提示中导出答案，以便它们在模板中可用:

this.prompt(prompts, function (answers) {
  var features = answers.features;

  function hasFeature(feat) {
    return features && features.indexOf(feat) !== -1;
  }

  this.includeSass = hasFeature('includeSass');
  this.includeBootstrap = hasFeature('includeBootstrap');
  this.includeModernizr = hasFeature('includeModernizr');
}.bind(this));

示例的模板将如下所示。 <% ... %>语法是实际的 JavaScript，在结果写入磁盘之前执行。

templates/_package.json

{
  "name": "<%= _.slugify(appname) %>",
  "dependencies": {
    "my-dependency-a": "^0.4.5",<% if (includeModernizr) { %>
    "modernizr": "^0.11.0",<% } %><% if (includeBootstrap) { %>
    "bootstrap": "^3.3.4",<% } %>
    "my-dependency-b": "^0.5.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

返回生成器代码，确保从模板生成此文件:

packageJSON: function () {
  this.template('_package.json', 'package.json');
}

作为最后一步，您需要实际运行 npm install在生成的目录中。 Yeoman 有一个助手可以为您执行此操作:

this.on('end', function () {
  this.installDependencies();
});

如果你看generator-webapp code为此，还有一些微妙之处可以处理用户可能不希望自动安装依赖项的情况以及对测试框架的特殊处理。但对于你描述的情况，上面的内容已经完全足够了。

我希望这有帮助。 :)