Skip to content
This repository has been archived by the owner on Jan 13, 2018. It is now read-only.

Latest commit

 

History

History
99 lines (66 loc) · 6.46 KB

levels.ru.md

File metadata and controls

99 lines (66 loc) · 6.46 KB

Уровни переопределения

На уровне переопределения должен располагаться файл конфигурации .bem/level.js, который содержит в себе мета-информацию об устройстве уровня, а именно:

  • правила маппинга БЭМ-сущностей в файловую структуру
  • технологии, определенные для уровня
  • мета-информацию для системы сборки.

При создании уровня командой bem create level файл .bem/level.js создается пустым. Это означает, что уровень «стандартный». Поведение стандартного уровня описано в классе Level в файле lib/level.js.

Перекрыть поведение уровня просто. Файл .bem/level.js (как и практически любой файл конфигурации) является CommonJS-модулем. При обнаружении такого файла bem-tools создает класс-наследник стандартного класса Level, используя экспорт этого модуля в качестве расширения класса (внутри используется модуль inherit).

В примере ниже перекрывается метод getTechs().

exports.getTechs = function() {

    return {
        'bemjson.js': ''
        'css': 'path/to/my/css-tech-module.js'
    }

};

Наследование уровней

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

Чтобы задать базовый уровень, необходимо экспортировать свойство baseLevelPath из модуля, например:

exports.baseLevelPath = require.resolve('path/to/base/level.js');

Уровни-наследники также можно создавать командой:

bem create level <your-level-name> --level path/to/base/level.js

Правила маппинга БЭМ-сущностей в файловую структуру

По умолчанию на уровне переопределения используется следующая схема маппинга (на примере технологии css):

level/
    block/
        __elem/
            _mod/
                block__elem_mod_val.css
            block__elem.css
        _mod/
            block_mod_val.css
        block.css

Если вас не устраивает эта схема, вы можете задать свою. Для этого нужно перекрыть соответствующие match*() и get*() методы в файле .bem/level.js.

Технологии, определенные для уровня

Для уровня переопределения можно задекларировать список используемых технологий. Достаточно экспортировать функцию getTechs(), которая должна вернуть объект, в ключах которого лежат имена технологий, а в значениях:

  • абсолютный путь до технологии — будет использоваться модуль, находящийся по этому пути.
  • короткое имя технологии — будет использоваться реализация технологии с указанным именем из bem-tools.
  • пустая строка — будет использоваться реализация технологии по умолчанию.

По умолчанию на уровне переопределения явно не определена ни одна из технологий. Если попытаться внутри таких уровней использовать технологии по короткому имени (например, css или js) то будут использованы модули технологии из состава bem-tools, если они существуют. Полный список таких технологий смотрите в lib/techs.

Если попытаться использовать технологии, которые явно не задекларированы и которых при этом не существует в bem-tools — будет использоваться реализация технологии по умолчанию (см. lib/tech.js).

Технологии, задекларированные на уровне, используются:

  • командой bem create
  • командой bem build
  • для интроспекции по файловой структуре (см. метод getLevelByIntrospection() класса Level)
  • в процессе сборки командами bem make и bem build.

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

Метаинформация для системы сборки

Во время сборки проекта командами bem make и bem server для выполнения команды bem build необходимо знание о том, из каких уровней переопределения нужно собирать тот или иной бандл. Эти знания необходимо отобразить в свойстве bundleBuildLevels объекта, возвращаемого функцией getConfig().

exports.getConfig = function() {

    return extend({}, this.__base() || {}, {

        bundleBuildLevels: this.resolvePaths([
            // укажите уровни
        ])

    });

};