Ребята, помогите решить задачку, хочется сделать по уму:
У меня есть две страницы в bundles: page1 и page2. Эти страницы очень похожи, разница в том, что page2 немного более расширена ( добавляются информационные блоки). В результате нужно иметь две страницы с чистым исходным кодом ( чтобы дополнительные блоки были только на странице page2).
Так как дизайн дорабатывается, да и для удобства поддержки, не хочется дублировать одинаковые на этих двух страницах вещи. Одинаковый блок, кроме текста, содержит ещё компоненты ( как стандартные из bem-components, так и самописные), да и вообще, представляет собой внушительную портянку.
Как сделать правильнее? Я пока вижу такие варианты:
- создать блок common_page и в bemhtml прописать там всю информацию для общей информации. После этого, подключать этот блок на странице page1 и page2. Отсюда возникают вопросы, правильно ли писать столько html в данном случае ( в bemjson около 1500 строк кода ) и будут ли работать стандартные и самописные компоненты? Ну и, конечно, переписывать 1500 строк кода совсем не хочется.
- придумать что-то типа @import(page1) для страницы page2. Возможно ли такая реализация?
- попытаться решить через модификатор ( расширенная страница - page2 или обычная - page1). Но при этом у меня должно в bundles так и остаться 2 физические страницы с чистым кодом. Как тогда организовать работу модификатора?
В
bemjson.jsбандла можно использоватьrequire('your-common-parts.js'), т.к. это javascript И в файлеyour-common-parts.jsнаписать нужны контент примерно так:Как вариант, вынести общий кусок в этот файл, и в
bemjson.jsфайлах обоих бандлов написать:UPD: поправил
require('fs').readFileSyncнаrequire, потому что этоCommonJSмодуль. @tadatuta Спасибо) Если вставлять через readFileSync — получится просто текст.Подробности обсуждали в https://ru.bem.info/forum/214/#comment-73360939
Спасибо за ответы! Буду разбираться.
Попробовала оба варианта и столкнулась с проблемами:
Пробовала заклонить и собрать проект с этого коммита: https://github.com/tadatuta/bem-bemtree-static-project-stub/commit/5f19a54dac7fa09ea0ee8575cd6f2f026447416a , но проект тоже не запустился ( выдается ошибка: Error: ENOENT, no such file or directory '.../project-stub/desktop.blocks . Файл index.bemdecl.js лежит по пути: desktop.bundles/index)
Какие есть пути решения? В чём ошибка?
@OlgaVoz
В обоих случаях есть ошибки в коде.
В варианте с
requireважно учитывать, что BEMJSON должен экспортироваться какCommonJSмодуль (начинаться сmodule.exports = { block: 'page', /* ... */ }) и чтоrequire('../page-common/page-common.js')вернет объект, который экспортируется в данном файле, методаappendу него, конечно, нет.Проблема с
bem-bemtree-static-project-stub(git не умеет версионировать пустые папки и папкаdesktop.blocksизначально не попала в репозиторий) была исправлена в последующих коммитах, стоит использовать последний актуальный.Но в приведенном сниппете кода все равно есть ошибка. В
bemdecl.jsожидается строгочтобы просто перечислить используемые блоки, которые затем попадут в сборку, он не предназначен для генерации HTML. Чтобы сгенерировать HTML, потребуется выполнить BEMTREE-шаблоны, которые вернут BEMJSON, а уже из него получится HTML.
Если нужно, могу записать поясняющие видео, как начать разрабатываться с любым из вариантов.
Если это будет массив — то метод append будет ;-)
@zxqfox, ты, наверное, про
push?@tadatuta Ок, я наркоман. Не
.append, а.concat. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/concat@tadatuta , спасибо большое, было бы просто здорово!
Я остановилась на первом варианте, который предложил @zxqfox. Пока у меня выглядит всё так:
Общий файл ( Unresolved variable or type module):
Бандл с подключением (Exspression statement is not assignment or call):
При сборке выдается ошибка: ReferenceError: require is not defined.
B bower.json добавляю строку:
В make.js ( в папке .bem) добавляю: 'libs/require'
Почему-то всё равно not defined
Самый важный момент — прямо сейчас версия
bem-toolsс поддержкойrequireвсе еще не выпущена (ее можно поставить из ветки, но лучше использоватьENB).Чтобы описанное выше заработало для ENB, для текущей версии
project-stubпотребуется вот такой дифф https://github.com/bem/project-stub/compare/require?expand=1Если использование
bem-toolsпринципиально важно, в принципе могу попробовать завтра таки выпустить версию. Но так или иначе это будет последняя версия, поддерживающаяbem make, дальшеbem-toolsперейдет на использованиеENBпод капотом в любом случае.@tadatuta, нет, совсем не принципиально, ENB вполне устраивает. Спасибо большое, всё получилось!