Сборка бандла

Бандл — это файл, полученный в результате сборки исходных файлов проекта.

Для сборки бандла необходим список БЭМ-сущностей и уровни с исходным кодом блоков.

Список БЭМ-сущностей принято называть декларацией и описывать в формате BEMDECL, например:

exports.blocks = [
    { name: 'input' },
    { name: 'button' },
    { name: 'checkbox' }
];

Пример сборки бандла

Сборка бандла рассмотрена на примере проекта:

.enb/
└── make.js          # ENB-конфиг
blocks/              # уровень блоков
├── input/
    ├── input.deps.js
    ├── input.css
    └── input.js
├── button/
    ├── button.deps.js
    ├── button.css
    └── button.js
└── checkbox/
    ├── checkbox.deps.js
    ├── checkbox.css
    └── checkbox.js
bundle/
└── bundle.bemdecl.js # список БЭМ-сущностей

Для сборки бандла необходимо выполнить следующие шаги:

• Получить список исходных файлов, которые будут участвовать в сборке (для css и js).

  Для этого необходимо:

  a. Просканировать уровни и узнать, какие БЭМ-сущности существуют в проекте.

  b. Прочитать список БЭМ-сущностей, записанный в BEMDECL-файле.

  c. Дополнить и упорядочить список БЭМ-сущностей (b) на основе информации о зависимостях (input.deps.js, button.deps.js и checkbox.deps.js) между БЭМ- сущностями (a).

  d. Получить упорядоченный список файлов по упорядоченному списку БЭМ-сущностей (c), а также по интроспекции уровней (a).

• Применить технологии для сборки (css и js) и объявить таргеты.

  Make-файл ENB (.enb/make.js) будет выглядеть так:

  // Подключаем модули технологий
  var techs = require('enb-bem-techs'),
      provide = require('enb/techs/file-provider'),
      css = require('enb-css/techs/css'), // npm install --save-dev enb-css
      js = require('enb-js/techs/browser-js'); // npm install --save-dev enb-js
  
  module.exports = function(config) {
      // Настраиваем сборку бандла
      config.node('bundle', function(nodeConfig) {
          // Декларируем модули технологий,
          // которые могут участвовать в сборке таргетов.
          nodeConfig.addTechs([
              // Используем базовые технологии, чтобы получить
              // список файлов, которые будут участвовать в сборке.
              [techs.levels, { levels: ['blocks'] }],   // (1) -> `?.levels`
              [provide, { target: '?.bemdecl.js' }],    // (2) -> `?.bemdecl.js`
              [techs.deps],                             // (3) `?.bemdecl.js` -> `?.deps.js`
              [techs.files],                            // (4) `?.levels` + `?.deps.js` -> `?.files`
  
              // Технологии принимают на вход список файлов. Таргет, в котором хранится список файлов,
              // задается опцией `filesTarget` (по умолчанию — `?.files`). Для сборки будут
              // использоваться только файлы, суффиксы которых указаны опцией `sourceSuffixes`.
              [css],     // Опция `sourceSuffixes` по умолчанию равна `['css']`
              [js, { target: '?.js' }],      // Опция `sourceSuffixes` по умолчанию равна `['vanilla.js', 'js', 'browser.js']`
          ]);
  
          // Объявляем таргеты, которые нужно собрать.
          nodeConfig.addTargets(['?.css', '?.js']);
      });
  };
  

• Запустить сборку в консоли:

  $ enb make
  

• Проверить результат

  После сборки в директории bundle будут созданы bundle.css и bundle.js, а также служебные файлы.

  .enb/
  blocks/
  bundle/
  ├── bundle.bemdecl.js
      ...
  ├── bundle.css
  └── bundle.js