Как сделать качественный и расшияремый продукт, используя pug, webpack?

Question

[sir_pounce]

Вопрос к тем, кто пользуется данным стеком и прошарен в этом. Как писать сайты/приложения, используя pug, нативный js без фремворков и реакта, мб бэм и webpack, чтобы это было качественным и расширяемым? Нужна так же адекватная модульность, чтобы на каждую страницу (в случае многостраничного сайта) подключались только необходимые блоки, а не простыня из стилей (и без портянки import желательно). Если можно - дайте ссылки на готовые проекты, сделанные подобным путем или статьи.

Comments

[Павел Корнилов]

Звучит хорошо. Даже очень. Но в жизни - не встречал. Самому интересно, подпишусь на вопрос.

[G F]

По-моему автоматизированную модульность туда ещё не завезли, тоже подожду здесь в сторонке.

[Олег]

Если не нужны фреймворки, то и webpack ни к чему, на галпе можно, там есть PUG, БЭМ, сборка стилей и скриптов для каждой страницы

[Одиночка Айс]

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

на каждую финтифлюшку отдельный css-файл?

[WinPooh32]

Выносится код библиотек/стилей в отдельный проект на том же webpack'е.
Импортируются скомпилированные версии в другом проекте как внешние зависимости без включения в бандл.
Профит - на отдельной странице можно комбинировать подключаемые ресурсы.

П.С. это я только что придумал :)

Answer 1

[Robur]

Странный вопрос - чтобы сделать качественный и расширяемый проект, надо делать его качественно и закладывать расширяемость.
Для большей конкретики в ответах надо больше конкретики в вопросе.

"Адекватная модульность" заложена в вебпак и язык, остальное уже зависит исключительно от того как вы это используете.
Разбивайте приложение на чанки и загружайте только нужные. поддержка этого опять же есть в вебпаке, начните отсюда https://webpack.js.org/guides/code-splitting/

если вы хотите раздельно грузить css то может помочь https://webpack.js.org/plugins/mini-css-extract-plugin/
но я бы не рекомендовал это делать от слова совсем.

бэм уже не так актуален как раньше. но опять же если хочется - берите и применяйте.
css модули вам в помощь.

Comments

[Павел Корнилов]

Странный вопрос - чтобы сделать качественный и расширяемый проект, надо делать его качественно и закладывать расширяемость.

Браво! Без сарказма. +1

Answer 2

[Realetive]

Я так понимаю, вы ждёте готового решения, которое возьмёт на себя обеспечение «качественности» и масштабируемости.



Из более-менее простого на ум приходит только https://github.com/tars/tars/blob/master/README_RU.md — там и webpack, и pug (можно выбрать handlebars), и модульность и ещё несколько полезных автоматизаций. Но ни один фрейворк, starter kit или npm-модуль не защитит от говнокодинга, даже если обмазаться eslinter'ом. И говнокодить — это нормально. Всё приходит с опытом.

На TARS я делал, например, https://lavkaschastya.com (исходники) , вот там полно всякого такого, от чего сейчас должно быть стыдно.

Answer 3

[Sanes]

На Pug делают шаблоны. Для динамических сайтов придумали CMS.