Включение зависимостей на основе выбора пользователя

В настоящее время я создаю генератор 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).

Как мне это сделать?

Заранее благодарю за любую помощь!


yeoman-generator yeoman
person Liam Richardson    schedule 14.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хорошей практикой является включение только тех зависимостей, которые нужны пользователю!

Самый простой способ — а также способ, которым официальные генераторы — сделать 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();
});

Если вы посмотрите на код генератора-webapp, который это, есть еще несколько тонкостей для обработки случаев, когда пользователь может не захотеть устанавливать зависимости автоматически и специальная обработка для тестовых фреймворков. Но для описываемого вами случая, вышеизложенного вполне достаточно.

Надеюсь, это поможет. :)

person passy    schedule 14.04.2015