Как собрать frontend сборку из JavaScriptов?

Question

[Peacefulwarriorr]

Всем, привет.
Я новичок у меня есть верстка сайта в двух основных файлах - один для html второй - css. Мне более опытный товарищ подсказал, что верстку лучше собирать в одном файле index.html и с него ссылаться на js файлы которые функциями будут возвращать верстку. Но к сожалению, он не знает как называется этот метод, чтобы я мог про него прочитать, а времени объяснять у него нет. Подскажите пожалуйста, где можно про такой метод сборки файлов прочитать или как это называется? Всем хорошего дня.

Answer 1

[Егор Живагин]

Товарищ вам рассказывает про технологию Single Page Application (SPA), сборка файлов происходит, обычно, через webpack, а в качестве основного инструмента используются веб-фреймворки (React, Angular, Vue, Svelte, ...)

Но! Если веб-фреймворк вы не используете, то лучше делайте вёрстку средствами js. Тезис "лучше собирать в одном файле index.html и с него ссылаться на js файлы которые функциями будут возвращать верстку" - не верный. Во многих случаях это хуже

Если у вас простой сайт и вам не нужно SPA, не усложняйте

Comments

[Peacefulwarriorr]

Спасибо за совет)

Answer 2

[Владимир Коротенко]

Друг вам посоветовал что-то странное, я допустим сейчас переделываю домашнюю страницу. По итогам там получается следующее элементы оформления, заголовок, подвал, общие элементы. Все это написано на vue typescript потом это собирается webpack и публикуется в качестве обычного html . На выходе логичная схема редактирования и отсутствие головной боли при изменении раскладки страницы, всю верстку за меня делает webpack . И ругается если что не так.

Comments

[Егор Живагин]

Фактически, это работает ровно так же, как "друг подсказал" автору. У вас в итоге получается один html-файл, который отдаётся клиенту, в нём подключён скрипт приложения, который строит вёрстку

[Владимир Коротенко]

Егор Живагин, За исключением важных моментов.

Вебпак режет ненужные стили,
Оптимизирует js, css, картинки
Опять же я не заморачиваюсь с лэйаутоум, причем у меня он получается статический.