Эта история также была размещена в моем личном блоге.

Что за шлепок?

Plop - это небольшой пакет узлов, который упростит вашу жизнь, когда вам понадобится создать новый контроллер / маршрутизатор / помощник /…

Эй, чертовски легко создать новый контроллер: скопируйте и вставьте другой код контроллера, удалите определенные строки, которые вы не будете использовать. Тадааа!

Что ж, теперь задайте кучу законных вопросов:

  • О каком «другом» контроллере вы говорите? Более свежие? Самый «лучший» код? Есть ли там какой-нибудь эталонный контроллер?
  • Как я могу понять предыдущее, если я еще не эксперт по кодовой базе проекта?
  • Как убедиться, что я правильно назвал новый файл? Когда я удаляю строки, которые считаю «бесполезными»?
  • Нужно ли мне объявить этот новый контроллер в каком-то существующем файле? Который из? Как?

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

Было бы просто здорово написать `plop` в своем терминале, ответить на 2 вопроса и BIM, все готово!

Именно об этом я и говорю.

Установка

В качестве пакета узла `npm install -g plop`, и вы готовы поиграть с plop.

Вы также можете установить его локально в проект, добавив в зависимости:

npm install --save-dev plop

Затем добавьте его в свои сценарии `package.json`, чтобы вы могли запускать его с помощью `npm run plop`:

{
  "name": "your-awesome-project",
  "description": "This is an awesome project, isn't it?",
  
  "dependencies": {},
  "devDependencies": {
    "plop": "1.0.1"
  },
  
  "scripts": {
    "plop": "plop"
  }
}

Вуаля!

Конфигурация

Plop использует простой файл `plopfile.js`.

Вот стандартный файл конфигурации, который я предлагаю вам поместить в корень проекта:

module.exports = ( plop ) => {

  // Here we'll define our generators

};

Plop также будет использовать шаблоны, которые можно либо встроить в файл конфигурации, либо поместить в отдельные файлы. Я предлагаю поместить их в папку «plop-templates /«, тоже в корне проекта.

Все включено FTW

Как вы уже догадались: и генератор, и шаблоны встроены в проект, как и ваши тесты или средство выполнения задач (поздний завтрак, глоток, ворчание…).

У этого есть огромные преимущества по сравнению с настраиваемым генератором йоменов:

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

Короче говоря, когда генератор Yeoman для конкретного проекта может показаться излишним, шлепок подходит идеально. Легкий, близкий к исходному коду, его будет легче принять, поддерживать и, в конце концов, он будет использоваться.

Наш первый генератор

Для объявления нового генератора `plop` предоставляет вам `setGenerator`:

Подсказки

Часть `подсказки` делегирована Inquirer.js.

Вы можете просто обратиться к их документации, чтобы узнать все, что вы можете сделать - типы вопросов, выходной фильтр, проверка ввода…

Вы можете себе представить, что делаете нетривиальные вещи:

`validate` гарантирует, что данное имя модуля не пустое.

`filter` позволяет стандартизировать вывод: здесь имена модулей должны оканчиваться на `s` по соглашению. Даже если я сделаю это неправильно и укажу `calendar` в качестве имени модуля, я могу быть уверен, что переменная `name` будет` calendars `.

Действия

Теперь он знает все, что ему нужно, plop будет запускать все настроенные вами `actions`. Он может использовать все переменные, которые передал запросчик.

Действия, как и шаблоны, разбираются с помощью Handlebars. Если вы понимаете, как это работает, вы знаете, как использовать plop.

Следовательно, `{{name}}` - это ответ на приглашение, проверенный и отфильтрованный ранее. Вы можете перетащить его где угодно, в созданный путь к файлу и / или его шаблон.

Пока что поддерживается 2 типа действий:

  • `” добавить ”`, который создаст новый файл по заданному `пути` - который относительно `plopfile.js`
  • «» изменить »«, который изменит файл, расположенный по заданному «пути«. Он заменит RegExp, который вы указали в `pattern`, на предоставленный вами шаблон.

Оба действия могут либо использовать встроенный шаблон через `template`, либо извлекать его из пути, установленного вами через `templateFile`.

Представим себе такую ​​реализацию:

Затем, допустим, у вас есть шаблон plop-templates / model.js `:

Учитывая, что `{{name}}` равно `calendars`, тогда plop создаст следующий `app / modules / calendars.model.js файл:

А также преобразует ваш текущий файл модуля `app / modules / calendars.js`:

Чтобы вставить ссылку на созданную модель:

С помощью «» добавить »« и «» изменить »` вы можете облегчить множество мелких повторяющихся вещей.

Кроме того, вы можете передать функцию в` actions `. Эта функция принимает ответы пользователя в качестве параметра и должна возвращать массив действий, которые необходимо предпринять.

Таким образом вы сможете адаптировать действия к полученным ответам.

Рассмотрим этот пример создания нового модуля:

Ваш генератор может адаптироваться ко многим различным сценариям (например: модуль с моделью, коллекция + модель, с CollectionView или CompositeView…).

Помощники

Небольшое замечание о шаблонных помощниках plop: это те из Handlebars.

Вы начинаете с кучки помощников, которые вам дает шлепок. Например, `camelCase` просто работает следующим образом:

// given name = "my awesome module"
{{camelCase name}} // -> `”myAwesomeModule”`.

Вы можете определить свои собственные помощники в `plopfile.js` с помощью `addHelper`:

module.exports = ( plop ) => {

  plop.addHelper( "upperCase", ( text ) => text.toUpperCase() );
  
  // …
    
};

Мы только что создали помощник `upperCase`, который мы могли бы использовать позже в `действиях` и шаблонах: `{{upperCase name}}`.

Просто используйте это

Вот и все, просто введите npm run plop - или просто plop, если вы сделали его глобальным - затем следуйте инструкциям.

Вы также можете напрямую вызвать конкретный генератор с помощью

npm run plop [generatorName]

Plop быстр и эффективен в использовании, как и Yeoman. Однако он намного легче и проще в обслуживании.

Мой опыт работы с продакшеном

На момент написания я использую шлепок со своей командой по проекту Винога. Его функции идеально подходят для наших сценариев использования.

Я написал генератор Yeoman для этого проекта раньше. Команда конкретно не использовала его.

Определенно, plop - это инструмент, который экономит вам 10 минут здесь и там каждый божий день. И запустив `plop module` в консоли, как это круто \ o /