Использование HTML в Express вместо Jade: руководство

Быстрый ответ

Если вы хотите использовать нетронутый HTML в Express вместо Pug (ранее известного как Jade), лучшей рекомендацией будет EJS, который позволяет обрабатывать HTML-файлы.

npm install ejs

Добавьте следующий код при инициализации Express:

const express = require('express');
const app = express();

// Указываем Express обрабатывать '.html' с помощью EJS
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

// Теперь мы приступаем к созданию магии на HTML! ♪┏(°.°)┛┗(°.°)┓♪
app.get('/', (req, res) => res.render('index'));

app.listen(3000);

Переместите ваш index.html в каталог views и Express без проблем его обнаружит, даже без указания расширения .html в res.render().

Подача отдельных HTML-файлов в Express

Бывают моменты, когда требуется простота – такая крайняя простота, что она напоминает игру ребенка с чайником ☕️. Чтобы подавать отдельные HTML-файлы в Express без использования шаблонизаторов, вы можете воспользоваться методом res.sendFile.

const path = require('path');

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views/index.html'));
});

Не забывайте о правильной настройке Content-Type и обработке возможных ошибок ❤️:

const options = {
  dotfiles: 'ignore',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true,
    'Content-Type': 'text/html'
  }
};

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views/index.html'), options, (err) => {
    if (err) {
      console.log(err);
      res.status(err.status).end();
    }
  });
});

Создание своего движка шаблонизации

Если вы любите делать все самостоятельно, вы можете создать свой собственный шаблонизатор с использованием app.engine и fs.readFile. Этот подход проще EJS или других движков и не требует дополнительных усилий – примерно как у собаки, которая меняет шерсть 🐕.

const fs = require('fs');

app.engine('html', (filePath, options, callback) => {
  fs.readFile(filePath, (err, content) => {
    if (err) return callback(err);
    // Простейший шаблонизатор
    const rendered = content.toString().replace('#title#', options.title || '');
    return callback(null, rendered);
  });
});

app.set('view engine', 'html');
app.set('views', './views'); // Обозначаем папку для шаблонов

Не забывайте о стратегиях кеширования, будь это в оперативной памяти или более продвинутых вариантах, чтобы увеличить скорость работы вашего приложения.

Стратегии кэширования

Кэширование представлений становится все более важным по мере разрастания вашего приложения. В продакшен-среде Express это можно настроить следующим образом:

app.set('view cache', true);

При подаче файлов через res.sendFile правильная стратегия кэширования на клиенте и сервере сможет уменьшить нагрузку на сервер. Качественное кэширование делает ваше приложение быстрым, вроде гепарда в погоне за добычей 🐆.

Визуализация

Выбор между Jade/Pug и HTML в Express похож на выбор рубашки из шкафу:

Рубашка Jade/Pug (👔):

• Элегантна, но требует осмотрительности, так как чувствительна к отступам
• Не каждому подходит

Рубашка из простого HTML (👕):

• Проста и понятна
• Подходит для любого случая
• Легко интегрируется с различными фронтенд-технологиями

Многогранные расширения файлов и рендеринг

app.engine в Express открывает возможности для настройки обработки различных типов файлов, давая вам свободу в выборе методов рендеринга:

app.engine('md', someMarkdownEngine());

Вы можете использовать этот подход для обработки файлов Markdown или любого другого формата файлов на свой выбор.

Следите за версиями Express и Node.js

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

Полезные материалы

1. Использование шаблонизаторов в Express — познакомьтесь с интеграцией HTML и Express.js через различные шаблонизаторы.
2. HTML: HyperText Markup Language | MDN — всё о HTML, начиная от основ и до сложных комбинаций.
3. Как подключить CSS используя Node, Express и EJS? – Stack Overflow — советы сообщества по включению CSS в HTML в приложениях на Express.
4. EJS — Встроенный шаблон JavaScript — полное руководство по использованию EJS, простого шаблонизатора для генерации HTML с помощью JavaScript.
5. Подача статических файлов в Express — официальное руководство по подаче статических файлов, таких как HTML, CSS и JavaScript, в Express.js.
6. GitHub – expressjs/serve-static: Подача статических файлов — подробности об использовании промежуточного ПО serve-static для обработки статических файлов в Express.js смотрите на GitHub.