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，那么处理用户可能不想自动安装依赖项和测试框架的特殊处理的情况有一些细微之处。但就你所描述的情况而言，上述情况已经足够了。

我希望这会有所帮助。：）

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

1 个答案: