Как в vite разбить index.html на несколько файлов?

Question

[Danya Wyse]

В галпе работал @@include. Как это делается в vite? Было бы удобно делать верстку по блочно и чтобы большие части верстки были в отдельных файлах

Comments

[godsplan]

использовать handlebars/pug/nunjucks/jsx
Скорее всего для vite нет плагина html include который ты юзал в галпе

[Danya Wyse]

handlebars ужасно работает с комментариями, а точнее вообще не понимает что это такое так как формат файла не html.

[Danya Wyse]

godsplane, пытался подключить nunjucks
TypeError: nunjucks is not a function

Кривая дока какая то, почему я должен сам догадываться как это внедрять в сборщик. Почему нельзя сделать адекватную доку.

[godsplan]

Danya Wyse если тебе нужно что-то для верстки, то лучше оставь идею с vite так как он заточен под esnext.
Собери себе конфиг на вебпак

[Danya Wyse]

godsplane, я пока клепал сборщик на вебпаке, мне сказали успокося и иди собирай Vite. Теперь мне говорят собирай вебпак)))

[godsplan]

Danya Wyse, vite простой но очень ограничен для таких "легаси" способов создания сайтов. У тебя насколько я знаю там не будет работать даже autoprefixer

[Danya Wyse]

godsplane, работает autoprefixer, все также работает, просто из за "свежего" сборщика больше гемора потому что сообщество не такое огромное как в вебпаке. Понапридумал каждый второй по своему сборщику, теперь сижу хавую это. Наслушался на свою голову умников. Один говорит Gulp не то, другой на вебпак гонит. Хотя по сути они для меня выполняли ровно одинаковые функции. Была сборка от Фрилансера по жизни Gulp + webpack, но она перестала работать. Хочу своими руками пособирать чтобы знать что где находится вообще в конфиге

[godsplan]

Danya Wyse, ну на сборку своего сборщика на вебпаке у меня вчера ушло около часа времени, так что просто прочитай доку вебпака и пойми его суть, если надо подключить галп, но меня и без галпа все устраивает сейчас.
Хотя бы пойми что тебе вообще нужно от сборщика

[godsplan]

Вебпак плох, vite лучше и быстрее, но не для верстки

[Danya Wyse]

godsplane, Вообще мне кажется очень много времени уделяю на эти сборщики, я ведь даже еще не приступал к фреймворкам. Сижу ковыряю пакеты

[FrelFrloich]

Danya Wyse, Я тут баловался с вите для вёрстки, https://github.com/FrelAdonai/vite-vanila-js-multipage можешь скачать почистит коменты ставить в hbs проблем нет при билде и деве.

<!-- коментарий -->

[FrelFrloich]

Забыл добавить, если решишь, то в partials hbs файлы находятся.

[Danya Wyse]

FrelFrloich, Потыкаю, спасибо.

[FrelFrloich]

godsplane, Да всё норм работает, сборщик так то ничего, нареканий нет, немного гемор в настройке, а так нормально, ну и с разбивкой файлов, трабла, если я хочу чтоб мне разбило на 3 js файла, вендор индек и какой то ещё, но два из них минимизировались а один нет, это я так и не решил... а в целом всё ок.

[Danya Wyse]

FrelFrloich, автообновление партиалсов у тебя не работает если это свойство за это отвечает reloadOnPartialChange: true

Я нашел кастом функцию которая решает эту проблему, а вообще подключил плагин который спокойно инклудит html страницы

[Danya Wyse]

FrelFrloich, автообновление партиалсов у тебя не работает если это свойство за это отвечает reloadOnPartialChange: true

Я нашел кастом функцию которая решает эту проблему, а вообще подключил плагин который спокойно инклудит html страницы

[FrelFrloich]

Danya Wyse, да мне проблем не было, я всё равно сначало на странице основной делаю части, потом их пихаю в партиалс, по этому даже и не пробовал что там обновляет что нет, за это сорян.

[Danya Wyse]

FrelFrloich, А еще я и в своей сборке пока не решил как пофиксить

По канонам ты должен подключать все форматы шрифтов, включая SVG для яблок и андроидов, а при билде формат SVG попадает в папку с картинками а не со всеми шрифтами

[FrelFrloich]

Danya Wyse, в конфиг зайди, расширение svg вставь где шрифты по идее должно куда надо оптравляться. у меня была единсвенная проблема с путями до шрифтов) при билде вместо ../fonts проставлялось fonts/ вот тут я завис на долго. Но по итогу всё равно вернулся к галпу более чем устраивает, что хочешь куда хочешь, как хочешь перекидывает.

[Danya Wyse]

FrelFrloich, У меня тоже есть рабочий галп + вебпак, просто это купленная "жирная" сборка, но очень хорошо настроенная. Хотелось просто самому как то покопаться, но какой то гемор. Слишком много времени убиваю на сборщики.

[FrelFrloich]

Danya Wyse, я не парюсь, вите использую только для себя, надо мне слайдер запилить, понаписал js сбилдил да и всё, в рабочем состоянии, мне трудно его применить из за выше сказанного, не собирает сволочь как я хочу, чтоб некоторые js компилировал но не сжимал а остальные сжимал. Да и чёрт с ним.

А так совет, если по приколу как я, то ладно, а если гнаться за "современными" сборщиками то толку нет. всем пофиг на чём ты собираешь, результат то всегда один, css html js.

Answer 1

[Егор Данченко]

Из данной секции можно выделить наиболее популярные варианты для решения вашей задачи:

• vite-plugin-html (ejs)
  
• vite-plugin-handlebars (handlebars)
  

Сам использовал второе решение: задачу оно решает, однако есть некоторые неудобства, такие как установка подключаемым шаблонам html атрибутов.

Comments

[Danya Wyse]

vite-plugin-html хорошо решил проблему