© 2021 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'
}
]
},
...
]
};

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

Комментарии