© 2021 WebHive

Добавляем в БЭМ проект стандартные блоки и компоненты

Ранее в статье Создаём минимальный проект на БЭМ c нуля мы создали проект на БЭМ. Однако он пока довольно бесполезен. Пришло время расширить его добавив уже готовые решения и компоненты предоставленные компанией Yandex.

Собственно можно обойтись и без этого, но я не вижу причин не использовать опыт накопленный инженерами Yandex и не использовать их решения, уже проверенные в боевых условиях на множестве их проектов.

Итак — поехали!

Устанавливаем bem-core и bem-components — соответственно минимальный набор блоков и технологий и набор дополнительных компонентов.

Вот только как же это сделать? Документация просто божественна — «Вы также можете добавить библиотеку к себе в проект любым известным вам способом.».
Ну или опять через project-stub. Похоже никто уже не помнит как всё это хозяйство собирать.

Ну что — поехали ставить bower (если у вас его ещё нет). Ну даже если есть — пусть хоть добавится в package.json

1
2
$ npm install -g bower --save
$ bower init

Ставим bem-core и bem-components

1
2
3
4
5
6
7
8
9
10
11
12
$ bower install bem-core --save
bower bem-core#* cached https://github.com/bem/bem-core.git#3.0.1
bower bem-core#* validate 3.0.1 against https://github.com/bem/bem-core.git#*

$ bower install bem-components --save
bower bem-components#* cached https://github.com/bem/bem-components.git#3.0.0
bower bem-components#* validate 3.0.0 against https://github.com/bem/bem-components.git#*
bower bem-components#^3.0.0 install bem-components#3.0.0

bem-components#3.0.0 bower_components/bem-components
└── bem-core#3.0.1

bem-core

В этой библотеке только 2 HTML элемента — это page и clearfix. Остальное — javascript функции.

Правим ENB конфиг

Добавляем уровни переопределения для bem-core.

1
2
3
4
5
...
levels = [
{ path: 'bower_components/bem-core/common.blocks', check: false },
{ path: 'bower_components/bem-core/desktop.blocks', check: false },
];

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

И добавляем в BEMHTML суффикс bemhtml т. к. компоненты используют файлы bemhtml не в js формате.

1
[techs.bemhtml, { sourceSuffixes: ['bemhtml', 'bemhtml.js'], forceBaseTemplates: true }],

Формируем правильную HTML страницу

Запускаем перегенерацию проекта

1
$ ./node_modules/.bin/enb make

Проверяем, что блок page теперь не div, а полноценная страница с тегами <head>, <body> и т. п.

bem-components

Добавляем bem-components в уровни переопределения.

1
2
3
4
5
6
7
8
9
10
11
...
levels = [
levels = [
{ path: 'bower_components/bem-core/common.blocks', check: false },
{ path: 'bower_components/bem-core/desktop.blocks', check: false },
{ path: 'bower_components/bem-components/common.blocks', check: false },
{ path: 'bower_components/bem-components/desktop.blocks', check: false },
{ path: 'bower_components/bem-components/design/common.blocks', check: false },
{ path: 'bower_components/bem-components/design/desktop.blocks', check: false }
];
];

Добавляем в bemjson какой-нибудь компонент. В нашем случае это будет button. Ну и после перегенерации страницы можем наблюдать HTML код нашей кнопки в теле нашей страницы.

Итого

Комментарии