Ребята, помогите решить задачку, хочется сделать по уму:
У меня есть две страницы в 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 вполне устраивает. Спасибо большое, всё получилось!