Сборка для SPA

Это вам https://github.com/enb-make/enb-bembundle мог бы помочь, если бы код его был актуален. Проблема обсуждалась https://ru.bem.info/forum/issues/314/ https://ru.bem.info/forum/issues/341/

9 years ago

Спасибо за ответ, полагаю ,что так как я хочу так не выйдет. Потому что, это противоречит самой идее так как бандл должен иметь все файлы и при переходе от страницы (index.html) к странице (index2.html). И собрать один index.html, index.js, index.css для реализации SPA подхода таким подходом к сборке не выйдет. Я правильно понял ?

Я использую SPA подход и меня он устраивает, верстка и организация стилей , а так же писать JS для блоков удобнее в терминах БЭМ.

9 years ago

https://github.com/enb-make/enb#%D0%A1%D0%B1%D0%BE%D1%80%D0%BA%D0%B0-merged-common-%D0%B1%D0%B0%D0%BD%D0%B4%D0%BB%D0%B0

Если вам нужен 1 большой бандл со всеми блоками, используемыми на всех страницах — это, в общепринятой терминологии, merged-бандл. Немного другое, нежели то, что я вам предложил, и даже более простое — не нужно вычитать зависимости, не нужно даже этого модуля — нужно просто склеить все bemdecl (в т.ч. полученные из bemjson) из всех бандлов и собрать общий js/css из всех блоков, описанных в этих файлах bemdecl.

В примере в конфиге описано примерно то, что я текстом описал выше ;-)

А то, что я вам предложил, это иметь начальные бандлы (или 1 начальный бандл), и догружать бандлы в процессе работы при переходах на страницы, которым нужны блоки из этих бандлов.

/cc @blond

9 years ago

Да, видимо это то что нужно. Сейчас по пробую. Спасибо.

9 years ago

blond

Уточню лишь, что про merged-бандл есть актуальная документация — https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md

9 years ago

Спасибо))

9 years ago

Я знал, что ссылка не туда ;-) Спасибо!

9 years ago

А вы пробовали это проделать по этой документации?

9 years ago

.enb/ desktop.blocks/ desktop.bundles.merged/ |----- index.bemdecl.js |----- price.bemdecl.js |----- blog.bemdecl.js |----- contacts.bemdecl.js ├── 'merged-bundle.bemdecl.js - Уже сделанный merge. desktop.bundles/ ├── index/ ├── price/ ├── blog/ ├── contacts/

// Настраиваем сборку merged-бандла
config.nodes('*.bundles.merged', function (nodeConfig) {

    nodeConfig.addTech([enbBemTechs.mergeBemdecl, {
        sources: fs.readdirSync(nodeConfig.getPath()),
        target: 'merged-bundle.bemdecl.js'
    }]); - в графе видно что файл слияния создается, если я правильно понимаю этот граф. 

    // Обычная сборка бандла (5)
    nodeConfig.addTechs([
        [enbBemTechs.levels, {levels: ['desktop.blocks']}],
        [enbBemTechs.files],
        [enbBemTechs.deps],
        [js], - эта технология должна мне дать файлы ?.js
        // borschik
        /*[ borschikTech, {sourceTarget: '?.css', destTarget: '_?.css'}],*/
        [borschikTech, {sourceTarget: '?.js', destTarget: '_?.js'}] - которые я тут "обработаю"

    ]);
    nodeConfig.addTargets([/*'_?.css'*/,'_?.js' ]); - и результат исполнения цели создаст файл _?.js

В директории desktop.bundles.merged/ });

9 years ago

Хочется инструкции на эту ситуацию, чтобы выполнить её и получить правильно работающую сборку , чтобы знать как правильно и уже иметь точку от которой можно отталкиваться.

9 years ago

@ron116 Идея текущей реализации merged-бандла в том, что в desktop.bundles лежат декларации конкретных бандлов/страниц, а ENB при сборке создает рядом еще одну папку merged, в которой автоматически получает сумму всех desktop.bundles/*/*.bemdecl.js и выполняет сборку остальных таргетов по полученной суммарной декларации.

9 years ago

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

9 years ago

Самое идеальное , что хочется видеть это cookBook по вариантам настройки сборки, мне кажется это снимет большую часть вопросов.

9 years ago

@ron116 Общая схема сборки такая: Есть декларация (обычно в *.decl.js), содержащая список сущностей (блоков, элементов и модификаторов), которые необходимо собрать и упорядоченный список уровней, на которых лежат блоки. Все, что умеет сборщик — это пройти по всем уровням в поисках сущностей из декларации и, если найдет, склеить их по каким-то правилам, описанным в технологиях для сборки, в финальный бандл.

Декларация может быть получена из bemjson.js-файла путем его обхода сверху вниз с отбрасыванием повторений и всего, что не является БЭМ-сущностью, но можно и сразу написать decl руками.

Далее у каждой сущности из decl-а на каждом из уровней, участвующих в сборке, могут быть свои собственные зависимости (в *.deps.js), которые необходимо включить в сборку. В результате формируется общий суммарный список исходных сущностей + их зависимостей в бандле с расширением deps.js.

Затем сборщик заново итерируется по всем уровняем и собирает уже какие-то полезные технологии (CSS, JS, шаблоны и т.д.) на основе списка из полученного на предыдущем шаге deps.js.

Посмотреть все это на схеме для своего проекта можно, запустив enb server и открыв в браузере корневую страницу.

merged-бандл, как я писал выше, отличается лишь тем, что decl строится не на основе какого-либо bemjson.js или руками, а является суммой всех остальных decl-ов, существующих на проекте. Все остальное не меняется.

В качестве cook book могу предложить разве что документацию из https://github.com/enb-bem/enb-bem-techs

Ну а все, что в ней не освещено или написано непонятно — уточнять на форуме. Будем стараться оперативно отвечать.

9 years ago

@tadatuta :neutral_face: (c немым укором).

9 years ago

@zxqfox м?

9 years ago

Если у вас имеются инструкции подобного https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md характера, то сделайте пожалуйста чтобы они работали. В том смысле чтобы я по ней прошел и у меня включился тот вариант работы который описывается в инструкции.

9 years ago

@tadatuta Да явно порог входа на уровне шеи ;-( Complexity зашкаливает для конфига.

9 years ago

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

9 years ago

@ron116 Вот у нас сейчас есть шанс понять, как можно переделать конфиг так, чтобы он был простой и прямой как лом.

@blond @tadatuta Мы можем избавится от if в конфигах для merged бандла? ;-)

9 years ago

Я завел задачу на подумать про упрощение: https://github.com/enb-bem/enb-bem-techs/issues/119

9 years ago

@ron116 запилил в качестве примера сборку merged в project-stub: https://github.com/bem/project-stub/compare/merged?expand=1

9 years ago

@zxqfox как избавиться от if пока не понятно. есть декларативный способ сматчиться на merged, но нет способа сматчиться на все остальные, кроме него :(

9 years ago

@tadatuta Я давно предлагаю унести на отдельный уровень ;-). Но как именно те бандлы собирать — лучше в каком-то файле описывать. В общем, ты уже читал мои мысли.

9 years ago