Веб-пакет 4 + EJS + Express: архитектура проекта для рендеринга многостраничных приложений на стороне сервера

Введение

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

Архитектура программного обеспечения

1. Инструмент для сборки: веб-пакет (версия 4.16.5).
2. Язык шаблонов: EJS (версия 2.6.1).
3. Фреймворк для серверной части: Express (версия 4.16.4).

Инструкция по использованию

1. Установите зависимости: npm install.
2. Среда разработки: запустите npm run dev, чтобы открыть браузер и перейти на localhost:8888.
3. Сборка проекта: выполните npm run build.
4. Запуск в рабочей среде: используйте npm run server.
5. Развёртывание одним щелчком мыши: выполните npm run deploy.

После запуска проекта вы увидите страницу demo, которая демонстрирует большинство возможностей EJS. Если некоторые функции не поддерживаются, можно использовать методы, представленные в demo.

Описание функций

1. Разработка с использованием языка шаблонов EJS для рендеринга на стороне сервера.
2. В среде разработки можно запустить локальный сервер и скомпилировать веб-пакет с помощью одной команды. Это обеспечивает синхронизацию между изменениями в коде на сервере и клиенте. Также поддерживается чтение ресурсов из памяти без создания дополнительных каталогов, что делает процесс более быстрым и удобным.
3. Полная поддержка горячего обновления. Все изменения файлов отслеживаются, и происходит мгновенный рендеринг и отклик без необходимости перезагрузки страницы.
4. Улучшенный механизм обработки ошибок компиляции с использованием встроенного плагина webpack overlay.

Сценарии использования

Этот проект подходит для проектов, где требуется сильная зависимость от SEO, например, для корпоративных веб-сайтов. Он также может быть использован в проектах, где Node используется в качестве серверного или промежуточного слоя, с разделением передней и задней частей, при этом передняя часть предоставляет унифицированные данные и шаблоны для рендеринга.

О publicPath

Некоторые пользователи могут не знать о механизме publicPath. Это сложная концепция, но я постараюсь объяснить её кратко.

PublicPath — это опция в файле конфигурации веб-пакета, которая называется output. Output сообщает веб-пакету информацию о выходных файлах, таких как имена файлов после сборки и пути к ним. Поскольку выходные файлы используются в качестве ресурсов, которые загружаются через теги script и link, необходимо указать префикс для этих ресурсов. Этот префикс называется publicPath.

Значение publicPath будет добавлено в начало пути к ресурсам после сборки. Таким образом, серверные фреймворки, такие как Express, смогут определить, что эти файлы являются ресурсами, и напрямую возвращать их без дополнительной обработки.

О горячем обновлении

Проект полностью поддерживает горячее обновление для файлов JavaScript, CSS, Less и EJS. Вот несколько моментов, которые следует учитывать при использовании горячего обновления:

1. В среде разработки не рекомендуется использовать extract-text-webpack-plugin для разделения стилей, так как это может привести к тому, что webpack не сможет отслеживать изменения в стилях, и горячее обновление стилей не будет работать.
2. Webpack изначально не поддерживает горячее обновление представлений, поскольку они не импортируются через require или import. Однако в этом проекте предлагается расширение для поддержки горячего обновления представлений.

Об использовании тегов script и link для импорта ресурсов

Файлы JavaScript и стили можно импортировать в файл входа на странице с помощью оператора import. Однако, если вам нужно использовать глобальные библиотеки стилей, такие как Bootstrap, вам всё равно придётся использовать теги script и link.

Для этого необходимо выполнить следующие шаги:

1. Используйте copy-webpack-plugin в файле конфигурации webpack, чтобы скопировать ресурсы в папку после сборки.
2. При импорте ресурсов на страницу используйте маршрут, указанный в publicPath, иначе доступ к ресурсам будет невозможен.

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

Модификация и использование

1. Если вы хотите использовать другой шаблонный язык, такой как Jade, возможно, потребуется заменить соответствующие загрузчики EJS на загрузчики для выбранного вами шаблона. Кроме того, необходимо изменить расширения файлов в проекте на расширения нового шаблона. Эти изменения могут потребовать модификации файла конфигурации webpack и некоторых файлов на серверной стороне. Остальной код останется практически неизменным.
2. Рекомендуется использовать EJS в качестве исходного файла для представлений. Если вам нужно преобразовать файлы EJS в HTML после сборки, вы можете изменить значение EXT в build/config.json с ejs на html. Это приведёт к созданию файлов HTML.
3. Если вам не нужны шаблонные файлы, вы можете заменить файлы EJS собственными файлами HTML и удалить ненужные загрузчики шаблонов, такие как ejs-html-loader. Вместо этого используйте html-loader для файлов с расширением HTML. Эти изменения также могут потребовать модификации файлов конфигурации webpack и серверных файлов. Не беспокойтесь о возможных ошибках, просто попробуйте внести изменения несколько раз, следуя подсказкам об ошибках. Если у вас всё ещё есть проблемы, вы можете создать issue.

Участие и вклад

Если вам нравится этот проект, поставьте ему звезду. Спасибо за вашу поддержку! Если у вас есть вопросы, пожалуйста, создайте issue, и я постараюсь решить проблему.

Дополнительные детали и примечания

Ссылка на портал Juejin