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

Question

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

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

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，您会发现在处理用户可能不希望自动安装依赖项的情况以及对测试框架的特殊处理方面有一些更微妙的地方。但是对于你描述的情况，以上就完全够了。

希望对您有所帮助。 :)

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

Including dependencies based on user choice

yeoman

yeoman-generator