Войти с помощью github

Пытаюсь перевести проект на полный бем-стек. Пытаюсь сделать блок выбора параметров товара ( например, размера ). Есть блок .params, внутри него лежат элементы ( собственно размеры ) .params__item. Делаю ленивую инициализацию по клику на эелемент .params__item. При клике хочу назначить элементу на котором кликнули модификатор _selected.

Пытаюсь это сделать через this.setMod(this.elem('item'), 'selected') но в таком случае модификатор устанавливается всем элементам. Как их фильтровать?

Как вообще работать с домом внутри блока? Допустимо ли извлекать данные из event, например event.target? Где граница ипосльзования фрейморка и работа с чистым js?

Привет!

18 августа в 19:00 мы с нашими друзьями из Front-end Science проведем очередной БЭМап в Киеве!

В программе:

  • Последние наработки и новости из мира БЭМ, а также ближайшие планы.
  • bem-sdk: сборка без bem-tools или ENB.
  • БЭМ в динамике: express-приложение с BEMTREE + BEMHTML.
  • Свободное общение: ваш опыт разработки с БЭМ.
  • Ответы на вопросы.

Подробности и форма регистрации здесь.

UPD

По результатам вторых суток исследований ясно, что не происходит вызов decl.fn.apply в ymodules:startDeclResolving, т.е., до вызова provide(...) дело не доходит. Похоже, дело в том, что инициализируются те модули, что были определены до вызова jQuery.ready.

modules.define отрабатывает (кажется) нормально и описание модуля появляется в modulesStorage. Т.е., в этой части вроде всё ок.

Т.е., как сейчас представляется, нужна возможность сказать (кому? YM?), что добавлены модули и надо бы проверить зависимости.

На данный момент проблема решилась ручным вызовом modules.require(['test1'], ...) после загрузки кода модуля. Немножко странно, но работает. Видимо, если не найдётся более грамотного решения, буду лепить подпорку на основе этого хака. Увы.

Описание ситуации

Загружаю btmhtml-шаблоны и y-модуль с кодом класса блока динамически, примерно таким образом (упрощённо; специально вытащил в тапой отдельный код, чтоб проще отлавливать ошибки):

var src = '/static/js/bem-test/test.browser.js';
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.onload = function script_on_load () { console.info('test1 script loaded'); };
script.src = src;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Шаблоны подсасываются и работают нормально (с небольшим хаком в BEM-XJST User-code Start), а вот с модулями какая-то беда.

I-BEM почему-то думает, что этот блок должен быть live -- причём только при такой (динамической) загрузке; если цеплять линком (<script ... src="..."></script>), то всё срабатывает нормально.

После загрузки модуля блок создаётся примерно так:

var pageBemhtml = { block : 'test', content : 'test1' };
var pageHtml = BEMHTML.apply(pageBemhtml);
var pageDom = BEMDOM.update(app.elem('container'), pageHtml);

В порядке эксперимента пробовал после этого ещё насильно инициализировать блок (с помощью BEMDOM.init(...)), -- результат нулевой.

Было замечено, что в initBlock(...) не выполняется условие

if(!(blockClass._liveInitable = !!blockClass._processLive()) || forceLive || params.live === false) {

-- и класс блока (block = new blockClass(uniqIdToDomElems[uniqId], params, !!forceLive);) не создаётся.

В дебагере пробовал возвращать из _processLive() false, -- тогда проходит внутрь и вроде как создаёт blockClass, но с live та же засада. Пока не понял, куда смотреть, что ещё отваливается.

И главное -- совершенно не понятна причина отваливания.

Прошу подсказок и советов.

Исходники шаблонов и модуля (на всякий случай)

Код модуля (тут для примера всё максимально простое пока):

console.info( 'module test1 root code' );
modules.define('test1', [
        'i-bem__dom',
        'jquery',
    ],
    function ( provide,
        BEMDOM,
        $
    ) {
console.info( 'module test1 provide' );
provide(BEMDOM.decl('test1', {
    onSetMod : {
        'js' : {
            'inited' : function() {
                console.info( 'module test1 initalize' );
            }
        }
    },
}
));
});

И шаблон (bemhtml):

block('test1')(
    content()(function(){
        var ctx = this.ctx;
        return [
            '<h1>Test1</h1>',
            ctx.content,
        ];
    }),
    js()(function(){
        return { test : 'test1' };
    })
);

Версии бибилиотек:

"bem-core": "~2.9.1",
"bem-components": "~2.5.1",

Делаю тривиальную вещь:

this.toggleMod('child', params.childIdx);

childIdx — число. Мод ставится на блок, но при повторном вызове хендлера не убивается. Числа начинаются с единицы.

Если сделать так, то всё работает ожидаемо:

this.toggleMod('child', 'num-' + params.childIdx);

Всем привет. Отвечая на тикет #1090 всплыла слабая сторона в БЭМ документации.

В сообществе есть люди, которые используют БЭМ на разных платформах (JS, PHP, Ruby, .NET и т.д.). Но на bem.info нет раздела про гайды о подключении / внедрении БЭМ. Всё разбросано по форуму, разбросано в ответах.

Нужно помочь развитию БЭМ гайдами по внедрению в проект, ведь здесь ОЧЕНЬ и ОЧЕНЬ большой провал. Всё сводится к тому, что: "Да, можно внедрить куда угодно". Но вот как это сделать, где примеры?

Что нужно от разработчиков БЭМ?

Сделать на сайте раздел гайдов.

Что нужно от сообщества БЭМ?

Написать гайд для своей платформы и сделать PR или опубликовать его на форуме. Пускай он будет корявый и косой на первых этапах, но он будет! Люди уже смогут начать внедрять БЭМ в проекты намного быстрей.

П.Н.

Как-то разработчики БЭМ делали конкурс по разработке. А сейчас можно было бы сделать конкурс по лучшему гайду о том как максимально быстро внедрить всё в проект.

Awesome списки перечисляют самые лучшие образцы в заданной теме и имеют много посетителей и подписчиков.

Вот возможно неплохой пример такого списка тех. блогов, найденный мною в awesome awesome (список awesome-списков)

https://github.com/kilimchoi/engineering-blogs#y-companies

Конечно такие списки курируют не всегда самые знаменитыи и признанные профессионалы в соответствующих областях и авторитет не всегда является главным и единственным источником правды,

Тем не менее, огорчает отсутсвие Yandex в этом и других списках (мб где-то и есть, но я не интенсивно искал) (в качестве бреда: плохо, что мы называемся на ту же букву, что и Yahoo)

p.s. пишу здесь, т.к. 1) можно начать с блогов фронтендеров 2) я фронтендер и где другие Я.Касты тусуются не знаю

Хотел предложить внести bem в хаб документации devdocs https://github.com/Thibaut/devdocs

пользуюсь им из alfred, так удобнее быстро переходить к описанию методов из API

Но bem выглядит совершенно непопулярным, т.к. количество звёздочек например у https://github.com/bem/bem-core/ сильно меньше 3k У bemhtml и того меньше: https://github.com/bem/bem-xjst

Условия:

  • Source code documentations only (HTML format)
  • Project must be open source (as defined by OSI) and actively maintained
  • License must permit alteration, redistribution and commercial use
  • Project must have >3k stars on GitHub or equivalent

Кажется, с другой стороны, пользовтелей сильно больше 3k, только они не очень активны

Этот показатель хотя и является несерьёзным, всё же используется как ключевой аргумент при переходе на технологию

Может быть сделать цель, увеличить звёздочки? Замотивировать их ставить

Можно в BEM чатик написать прямо, И опосредованно в блогах и на страницах на bem.info Флешмоб на внутреннем семинаре провести + внешние конференции, тоже можно обыграть как-нибудь


Покажи настоящую популярность БЭМ, подари свою ⭐!

...
11:49:48.427 - [rebuild] [desktop.bundles\merged\merged.dirs] files
11:49:53.753 - [failed] [desktop.bundles\merged\merged.css] stylus
11:49:53.759 - [failed] [desktop.bundles\merged\_merged.css] borschik
11:49:53.759 - build failed
Error: D:\_my-work-tasks\project\desktop.bundles\merged\merged.css:21:14
   17| /* ../../template.blocks/header/header.styl:begin */
   18| @import "../../template.blocks/header/header.styl";
   19| /* ../../template.blocks/header/header.styl:end */
   20|
   21| /* ../../desktop.blocks/ico-location/ico-location.styl:begin */
--------------------^
   22| @import "../../desktop.blocks/ico-location/ico-location.styl";
   23| /* ../../desktop.blocks/ico-location/ico-location.styl:end */
   24|

Failed to @extend ".link"

    at D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:406:17
    at Array.forEach (native)
    at Normalizer.extend (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:402:17)
    at Normalizer.visitGroup (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:279:8)
    at Normalizer.Visitor.visit (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\index.js:28:40)
    at Normalizer.visitBlock (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:232:27)
    at Normalizer.Visitor.visit (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\index.js:28:40)
    at Normalizer.extend (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:423:22)
    at Normalizer.visitGroup (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\normalizer.js:279:8)
    at Normalizer.Visitor.visit (D:\_my-work-tasks\project\node_modules\enb-stylus\node_modules\stylus\lib\visitor\index.js:28:40)

Похоже, что какой-то блок зависит от link (используется @extend ".link"), но в сборку link попадает позже

Вопросы:

  1. как (где) можно посмотреть файлы с @import?
  2. правильно ли я понял суть ошибки?

И ещё, понимаю, что торможу, но есть какой-то способ сохранять комментарии разработчика в итоговом файле css?

Привет. Начал использовать full-bem-stack ибо удобно. Столкнулся с не пониманием уровня детализации и инкапсуляции блока. Скажем, есть у нас стандартный слайдер со слайдами. .b-slider, .-b-slider__slide Каждый слайд состоит из картинки, фонового цвета, заголовка, текста и кнопки.

Как будет правильно создать блок слайдера?

{ 
    block: 'slider', 
    content: [ 
        { 
            elem: 'slide', 
            content: /* здесь выносим все элементы типа slider__slide-title, slider__slide-img т так далее */ 
        } 
    ]
} ```

или лучше для каждого элемента .b-slider__slide задавать аттрибуты, которые дальше превращать в нужную структуру элементов в шаблонизаторе bemhtml ?

P.S. Как в редакторе добавит код в <code> ?

Помогите определиться с тем, как подойти к стилизации блока с табами. Скажем, у меня есть простой блок Tabs с модификаторами horizontal и vertical. Без стилей (за исключением смены flex-direction в зависимости от этих модификаторов). Чтобы не плодить модификаторы, отвечающие за стилизацию самого блока Tab, за стили кнопок и табов отвечают примиксованные к ним элементы другого блока.

Например:

<div class="tabs tabs_type_horizontal booking">
    <div class="tabs__header">
        <button class="tabs__heading tabs__heading_active booking__heading" data-tab="tab_1">Tab #1</button>
        <button class="tabs__heading booking__heading" data-tab="tab_2">Tab #2</button>
        <button class="tabs__heading booking__heading" data-tab="tab_3">Tab #3</button>
    </div>

    <div class="tabs__content">
        <div class="tabs__tab tabs__tab_active booking__content" id="tab_1">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_2">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_3">
            <!-- content -->
        </div>
    </div>
</div>

Сейчас на активное состояние табов и кнопок указывает модификаторы элементов блока Tabs. Но как быть с блоком Booking. Ему для стилизации тоже нужно знать активное состояние. Будет ли правильным с точки зрения БЭМ-подхода использовать здесь такую "контекстную" стилизацию .tabs__heading_active.booking__heading?

Привет. Ещё одна маленькая бага, https://ru.bem.info/platform/tutorials/start-with-project-stub/#Миксы-блоков-и-элементов

При добавлении к блоку модификатора, если писать как предложено, то он не добавляется:

elem: 'item',
mods: { new: item.new ? 'yes' : undefined },

Если для элемента писать так, то всё ок:

elem: 'item',
elemMods: { new: item.new ? 'yes' : undefined },

Как можно реализовать вот такой прилипающий footer Ryan Fait's HTML5 CSS Sticky Footer на БЭМ?
Проблема в том, что блок должен обернуть содержимое body в тэг-обёртку и кроме того добавить определённые стили в и , что насколько я понимаю противоречит принципу независимости блоков. Можно вроде как добавить в и миксы, но как-то это на мой взгляд не совсем красиво ... да и насчёт миксов не уверен - недостаточно компетентен в БЭМ - методологии.

Коллеги!

Для описания БЭМ-дерева мы используем bemjson (или bemtree, который позволяет создавать полный bemjson страницы по частям, что по сути — то же самое, верно?) Однако, по своей природе json — довольно многословный формат представления данных, а html (jsx) более лаконичный.

Есть какие-то трансляторы jsx -> bemjson? Наверняка, кто-то думал в эту сторону, имеет ли это практичный смысл?

@tadatuta рассказал как использовать автоматическую генерацию актуальной документации для модульного фронтенда, презентация.

~Осталось не понятно, как это использовать. Покажите минимальный кейс использования bem-lib-site и расскажите где читать про остальное.~

UPD

git clone git@github.com:ilyar/bem-lib-site-test.git
cd bem-lib-site-test && npm install
npm test
open docs/index.html

Работает, хак внутри (может быть он уже не нужен). Сборку можно посмотреть тут ilyar.github.io/bem-lib-site-test/.

UPD 1/1/17

Убрал один хак https://github.com/ilyar/bem-lib-site-test/commit/a18e4849d46ed3ec370823080b204b3e14041877, добавил автотест генерации доки:

*nix status windows Status

Здравствуйте. Станицу можно как-то скролить? Допустим я захватил body, но мне не нужен верх страницы, я хочу сделать скрин середины.

Собственно, уже не в первый раз возникает проблема, когда на одном узле нужно разместить несколько сущностей: несколько элементов, несколько блоков и т.д. Это абсолютно не противоречит концепции BEM и называется миксами. Но когда доходит дело до реализации, получается, что миксуемые сущности не отрабатывают свои шаблоны bemtree и bemhtml, а только добавляют свои классы. Считаю такое поведение шаблонизатором некорректным, т.к. каждый блок имеет право на самореализацию, даже если он - всего лишь миксин. Для примера, попробуйте скомпилировать это: nav__item link popup tag Это - элемент списка, который отображается в виде тега, является ссылкой, а при наведении, появляется тултип с подсказкой. Пример, конечно не ахти, но суть в том, что такая ситуация возникнуть может. Сейчас я это решаю, разнося сущности по разным узлам, увеличивая вложенность, но мне очень не нравится этот способ, т.к. является костылем, который можно не всегда применять, влияет на структуру документа.

Вопрос №1

modules.define('page',
  ['i-bem-dom'],
  function (provide, bemDom) {
    provide(bemDom.declBlock(this.name, {
      onSetMod: {
        'js': {
          'inited': function () {
            // this.findChildBlock(FormLogin)._events().on('login:success', this._onLoginSuccess)
          }
        }
      }
  }))
})

// modules.require('page', function () {})

инициализация происходит только если раскомментировать последнюю строчку. Это нормально или я что-то не так сделал?

Вопрос №2.

Блок page я планирую использовать как глобального диспетчера. У page есть разные view (со своими наборами слушателей). По сути будет 3 view. (login, user, admin),

При переходе из view в другой view нужно менять вешать/убирать слушателей. Как это реализовать?

Пока начал эксперементировать с модификаторами. Но такой код срабатывает только при инициализации.

modules.define('page',
  ['form-login'],
  function (provide, FormLogin, Page) {
    Page.declMod({ modName: 'view', modVal: 'login' }, {
      onSetMod: {
        'js': {
          'inited': function () {
            console.log('login view')
            // console.log(this.findChildBlock(FormLogin))
            this.findChildBlock(FormLogin)._events().on('login:success', this._onLoginSuccess)
          }
        }
      },

      _onLoginSuccess: function (e, data) {
        console.log(data)
      }
    })

    provide(Page)
  }
)

Вопрос №3

Какая разница между

provide(bemDom.declBlock())

и

bemDom.declBlock()
provide(bemDom)

Понятно что технология нужна. Но, нужна ли для этого отдельная технология? Например, на одном проекте у реализована двупроходная шаблонизация средствами bh. И все норм. Не проще ли добавить в bemhtml метод для генерации bemjson? И генерировать 2 набора шаблонов. Это избавило бы от нужды тянуть на клиент лишний инстанс bem-xjst.

Всем привет.

В общем хочется процветания БЭМ во всех его направлениях. Хочу оставить несколько идей для голосования сообщества (ну и чтобы сообщество тоже предложило свои идеи для голосования).

За время жизни project-stub накопилось много моментов, которые так или иначе привлекают или отталкивают людей. А т.к. project-stub - это практически лицо БЭМ, хочется чтобы оно было максимально дружелюбным.

Идеи для голосования положил в issues project-stub. Начинаются с символа собачки @ https://github.com/bem/project-stub/issues

Например хочу добавить к себе select, подключив dist, а html посмотреть не могу (его просто нет). https://ru.bem.info/libs/bem-components/v3.0.0/desktop/select/#mode

Помогите решить проблему со сборкой тестов. Самостоятельно не получается разобраться.

При тестах выпадают ошибки такого вида

Error: Module "form-field": can't resolve dependence "i-bem-dom"

  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:294
  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:342
  file:////home/sergey/projects/bem-forms/common.specs/form-field_required/form-field_required.spec.js:374
Error loading resource https://yastatic.net/jquery/2.2.3/jquery.min.js (5). Details: Operation canceled

Вот конфиг https://github.com/belozyorcev/bem-forms/blob/bem-core-v4/.enb/make.js

upd. Смотрел конфиги bem-components, как тёмный лес.. Куда глядеть не понятно.

upd. Странно... Если подключить уровень для сборки тестов из библиотек, вместо проекта, то всё собирается. Может проблема в депсах?

upd. в bem-components увидел незнакомое мне описание депсов

[{
    mustDeps : { block : 'i-bem-dom' },
    shouldDeps : [
        {
            elems : ['box', 'control', 'text'],
            mods : { disabled : true, checked : true, focused : true }
        },
        { block : 'jquery', elem : 'event', mods : { type : 'pointer' } },
        'control'
    ]
},
{
    tech : 'spec.js',
    mustDeps : { tech : 'bemhtml', block : 'radio' }
},
{
    tech : 'tmpl-spec.js',
    mustDeps : [
        { tech : 'bemhtml', block : 'radio', mods : { type : 'button' } },
        { tech : 'bemhtml', block : 'icon' }
    ]
}]

может в этом причина?

Всем привет.

Есть блок week-editpanel, внутри него элемент famous_day (с помощью replace он станет button из bem-components). Файловая труктура блока:

week-editpanel famous_day week-editpanelfamous-day.bemhtml.js week-editpanel__famous-day.deps.js week-editpanel.css week-editpanel.deps.js week-editpanel.js

Содержимое week-editpanel__famous-day.bemhtml.js, week-editpanel.js и результат рендеринга элемента-блока famous_day выложил сюда

Что пытаюсь сделать Элемент famous-day так именован для удобства работы со всем блоком (например в блоке может быть много button или button toggable, но все они будут иметь разные имена), а уже в bemhtml миксоваться с button. Т.е. на выходе хочу получить элемент, который работает и как button toggable, и переносит все свойства и js методы из famous-day

Поставил перед собой две задачи:

  1. Разобраться с onClick по элементу внутри блока
  2. Разобраться с изменением модификатора примиксованного блока

С первым что-то отдалённое получилось, однако этот пример реализовать не удалось. Со вторым вообще ничего. Скорее всего у меня проблема в понимании как работать с примиксованными блоками. По второй задаче не удаётся отловить когда button toggable становится checked. Ставил анонимную функцию на обработку любых изменений модификатора и элемента - при клике ноль реакции

Всем привет! Подскажите как правильно переопределять блоки для бандлов. Т.е. у нас есть desktop.blocks/header и touch-phone.blocks/header. Почему блок header определенный в touch-phone.bundles/index/index.bemjson.js подключаются из desktop.blocks, а не touch-phone.blocks?

Как и обещал, выпустил Pobem@v1.

Список изменений (от версии 0.3.2)

Убрано : в декларациях блоков

Было

:block(block)

Стало

block(block)

Более чистый синтаксис

Больше не нужно для "каскадных" деклараций блоков (block, elem, mod) использовать &. Плагин сам склеивает и разбивает где нужно.

Было

:block(block) {
  &:elem(elem) {}
  &:mod(mod val) {
    width: 100px;
    &:mod(active) {
      &:elem(elem5) {}
    }
  }
  &:elem(elem1) {}
  &:elem(elem3) {}
}

Стало

block(block) {
  elem(elem) {}
  mod(mod val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem1) {}
  elem(elem3) {}
}

Переименовал Pobems -> Pobem

Такое название прощё запоминается

Синтаксис в виде цепочек (по аналогии с BEMHTML/BEMTREE)

Было

:block(block):elem(elem):mod(mod val)

Стало

block(block).elem(elem).mod(mod val)

Также сохранено

В качестве разделителя между mod val могут служить:

  • пробел -
  • запятая - ,
  • стрелка - ->

Названия блоков могут быть как в кавычках, так и без.

block(block).mod(mod val) === block('block').mod('mod', 'val')

репозиторий NPM репозиторий GitHub

Добрый день, начал изучать BEM и тут сразу же возникла проблема с Git Bash, дошёл до момента, когда мы в файле hello.js вставляем js код (https://ru.bem.info/platform/tutorials/quick-start-static/#Реализация-блока-hello), но когда я обновляю страницу, hello.js автоматически обновляется и вставленный мною код исчезает, можете подсказать, в чём причина того, что код автоматически загружается каждый раз, после обновление страницы.

Правильно ли я понимаю, что нельзя сматчиться на элемент блока, который примиксован к другому блоку?

// bemjson
({
    block: 'start-screen',
    content: [
        {
            block: 'button',
            mix: {block: 'start-screen', elem: 'button'}
        },
    ]
});

// bemhtml
block('start-screen')(
    elem('button').tag()('p')
);

Выдает такой html

<div class="start-screen">
    <div class="button start-screen__button"></div>
</div>

То есть правило в bemhtml не заматчилось. Ссылка на песочницу https://bem.github.io/bem-xjst/?bemhtml=block(%27start-screen%27)(%0D%0A%20%20%20%20elem(%27button%27).tag()(%27p%27)%0D%0A)%3B&bemjson=(%7B%0A%20%20%20%20block%3A%20%27start-screen%27%2C%0A%20%20%20%20content%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20block%3A%20%27button%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mix%3A%20%7Bblock%3A%20%27start-screen%27%2C%20elem%3A%20%27button%27%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%0A%7D)%3B%0A

Привет! А расскажите, пожалуйста, есть ли общепринятый способ, как избежать конфликтов имен блоков, пришедших из разных источников (от разных вендоров)? Где почитать?

Интуиция подсказывает, что раз есть большие компании, поддерживающие свои библиотеки блоков, наверняка же кто-то предусмотрел, что однажды кому-то понадобится подружить в одном проекте popup из библиотеки Яндекса и popup из библиотеки (условно) Mail.ru.

(поиск по "бэм вендор префикс" внезапно показывать что-то не то =))

Thx!

Если в lib1 и в lib2 есть блок с одним и тем же названием button, есть ли способ у себя на проекте использовать блоки из обеих библиотек? Например, lib1/button и lib2/button. Такой вопрос уже задавали здесь https://ru.bem.info/forum/-234/, но ответов я не увидел.

Как сделать, чтобы в ошибки из бандла валились в консоль с указанием информации о блоке? Кроме как вручную писать try { } catch (e) { console.log(this.block, e) }