Шаблонизатор/препроцессор для верстки в 2021?

Я понимаю что таких вопросов миллион, но я все их изучил(Многие) и не пришел к окончательному выводу.
Сейчас я использую EJS, но судя по всему поддержка у него не очень и я не видел чтобы кто-то его использовал (change my mind) + мне не особо удобно его использовать с вебпаком, так как по какой то причине подключаемые файлы шаблона не хотят прособираться при их редактировании (только главный файл)
pug мне нравится по функционалу, но не особо нравится синтаксис.
nunjucks судя по всему вообще не хочет работать с вебпаком , либо я что-то не так делаю, но я так понял это тир 1 сейчас.

В общем я хочу услышать от вас тир-1 шаблонизатор/препроцессор с функционалом циклов, подключения модулей и в принципе все что есть в nunjucks и ejs и pug.
  • Вопрос задан
  • 1587 просмотров
Пригласить эксперта
Ответы на вопрос 5
@SergeiB
Использую Nunjucks, доволен, как слон. Подключаю, как в приведённом тут примере:
import Nunjucks from './nunjucks'; // Импортируем Nunjucks из нашего файла конфигурации (см. ниже)

{
  test: /\.njk$/,
  use: {
    loader: 'html-loader',
    options: {
      preprocessor: (content, loaderContext) => {
        let result;

        try {
            loaderContext.addContextDependency(loaderContext.context);
            loaderContext.addDependency(PATHS.njkConfig); // PATHS.njkConfig - путь к файлу конфигурации

            result = Nunjucks.renderString(content); // или `Nunjucks.render(loaderContext.resourcePath)`
          
        } catch (error) {
          loaderContext.emitError(error);

          return content;
        }

        return result;
      },
      minimize: false
    }
  }
}


Файл конфигурации nunjucks.js.

import Nunjucks from 'nunjucks';

// PATHS.pages - путь к папке с файлами Nunjucks
const env = Nunjucks.configure(PATHS.pages, {
  noCache: true
});

// Тут можно задавать всякие фильтры и глобальные переменные, например:
// const isArray = value => Array.isArray(value);
// env.addFilter('isArray', isArray);
// env.addGlobal('projectName', 'mySuperProject');

export default Nunjucks;

Ответ написан
Комментировать
@Froggyweb
из адекватных для верстки - pug и nunjucks
ejs и handlebarsjs - слишком низкоуровневые, хотя наверняка быстрее.
React Vue Angular - это про другое.
nunjucks должен нормально работать с Webpack. Даже для Vite есть плагин, что и попробую сейчас.

Ну либо использовать posthtml-include, но это так себе костыль.
Под вебпаком PUG и pug-bem-plain-loader работают отлично, но вебпак как-то не торопливый. Галп + Вебпак для js - лучше, Vite пока фантастика, но плагинов не густо.
Ответ написан
Комментировать
bingo347
@bingo347
Crazy on performance...
Ответ написан
Комментировать
EaGames
@EaGames
Front-end developer
nunjucks + gulp
для чего вам webpack в верстке? - ну если вы делаете SPA или тому подобное на React/Vue итд, то да, но тогда зачем вам шаблонизаторы? ведь там свои тараканы аля jsx.
Ответ написан
profesor08
@profesor08
Создаешь проект на реакте или solid, верстаешь себе. Когда нужен будет хтмл, то скриптом генерируешь его. Потом используешь где надо. Единственное неудобство в том, что если нужен какой-то интерактив, то не получится написать его в компонентах, а потом все это сбилдить в хтмл, а код отдельно. Придется заводить отдельный скрипт для всего интерактива.

P.S. Нет никакого смысла верстать хтмл, потом растаскивать его на куски на бэкенде. Поддерживать такое очень сложно и долго. Если есть возможность использовать бэкенд в качестве апи, то не надо этим пренебрегать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы