WebHive

Заметки программиста-многостаночника
© 2024 WebHive

Проект на БЭМ - добавим немножко javascript-а

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

Ставим пакет enb-технологий для для сборки JavaScript-кода enb-js

1
$ npm install --save-dev enb-js

Добавляем в .bem/make.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var techs = {
  fileProvider: require('enb/techs/file-provider'),
  bemhtml: require('enb-bemxjst/techs/bemhtml'),
  bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html'),
  stylus: require('enb-stylus/techs/stylus'),
  js: {
    browser: require('enb-js/techs/browser-js') // вот тут
  }
},
...
module.exports = function(config) {
  config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
...
      [techs.js.browser, { includeYM: true }], // и тут
...
    ]);
...
    // добавляем цель сборки для яваскрипта
    nodeConfig.addTarget('?.browser.js');
  });
};

В bemjson подключим наш сгенерированный index.browser.js, а так-же заменим кнопку на переключаемую, чтобы увидеть работу яваскрипта в действии.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
    block : 'page',
...
    scripts: [{ elem : 'js', url : 'index.browser.js' }],
...
    content : [
...
        {
            block : 'content',
            content : [
...
                {
                    block : 'button',
                    mods : { theme : 'islands', size : 'm', togglable : 'check' },
                    text : 'I am check button'
                }
            ]
        },
...
    ]
};

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

Комментарии