Всем привет!
Раньше сидел на галпе, но мне кажется, что сборщик это конечно же хорошо, даже отлично, но речь сейчас вообще не о нем, а о WebPack'e.
Имеется сервак (который генерирует уже по сути статические html странички, на Laravel 5.3++ ). Из resources/views и дальше по папочкам разбросаны составные блоки, которые по определенным роутам и собираются в готовую страничку.
JS я разделили на не что похожее, (предположим мы знаем текущие разделы сайта, а будущие будут проходить через нас и мы будем писать код для них (фронт). И создадим подобие роутинга. И нашу входную точку в приложение. Состоящая из 1 js. Его задача получить текущий урл и вызывать спец для него основной js файл, через require.ensure. Он же в свою очередь подключает необходимые компоненты, библиотеки и т.д. в зависимости от нужд.
На проекте так же хочется использовать PostCSS с ModuleCss. Но как использовать эту модульность? Если основной рендеринг страницы делает Laravel (некий php фреймворк, со своими blade.php шаблончиками).
'use strict';
import styles from './css/main.css';
module.exports = function() {
let page = document.querySelector('.page');
page.innerHTML = '<p class="'+ styles.page + '">параграф, со стилями из main.css, класса page</p>';
};
Если делать так, то все понятно, веб пак сам создаст нужные css, добавит префиксы и будет хорошо.
Проблемы и мои мысли по их решению:
1. Как запустить модульную работу с КСС?
Возможно формировать json файл, который будет собирать не что похожее на:
{
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10",
}
как показано в офф. примерах:
https://github.com/css-modules/postcss-modules и исп хелпел, который при рендере будет обращаться к json файлу и заменять классы в верстке обновленными названиями? Кажется здесь все более менее.
2. Подгружать только нужные стили
Да, можно создать отдельную точку входа и собирать все ксс в него, но это бред какой то. Возможно ли как то показывать, что у этого блока есть стили, они должны подгрузить и не конфликтовать с другими. Главное здесь подгружать только нужное и асинхронно. И правильно ли это? Вот лог. путь до момента загрузки стилей:
- Грузится стр.
- Состоит из 1 или 2 js файлов, наш основной app.js, задача которого узнать куда обратился пользователь и начать подгружать нужный js. Второй js имеет повторяющейся код для всех стр.
- Нужный js загрузился и начал выполняться, ок в начале подключаем нужные стили (с учетом того, что мы постоянно должны следить за корректностью стилей которые требуем от элементов которые будут на странице, логика js и шаблона разделена).
- И теперь применяются стили.
Есть еще один вариант, инлайнить нужные файлы стилей в отдельные компоненты шаблона и при их вызове так же будут вызываться нужные css, Но тут так же учесть нужно модульность, что бы не было перезаписи стилей и как быть, если один компонент вызывается 2 раза и более?
Подскажите пожалуйста, я так глубоко залез в теорию, что полностью запутался и не могу увидеть правильного решения.
Большое спасибо
Простой