在 Express.js 中，模板引擎是一个重要的方面，它使得实现动态页面变得更加容易。Pug 是 Express.js 中最常用的模板引擎之一，但是有时候你可能需要考虑替代它。在这篇文章中，我们将讨论如何使用 EJS 替代 Pug，并提供一些示例代码，以便更好地帮助你理解这个过程。
EJS 简介
EJS 是一种简单的模板语言，它允许你使用 JavaScript 代码在 HTML 中插入动态内容。与 Pug 不同，EJS 不需要你掌握新的语法和方法。你可以在 EJS 中使用任何你已经熟悉的约定和语法，这是因为 EJS 在解析时会将你的代码作为 JavaScript 来处理。
安装 EJS
在使用 EJS 之前，你需要先安装它。你可以在 npm 上找到 EJS，并使用以下命令进行安装：
npm install ejs --save
然后，在你的 Express.js 应用程序中，你需要将 EJS 导入为模板引擎：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - --------------- ----- --- - ---------- ---------------- --------- - ---------- ------------- -------- ------- ------------ ----- ---- -- - ------------------- - ------ ------ -------- ------ ----- --- --- ---------------- -- -- - -------------------- ------ --------- -- ---- ------- ---
这个例子介绍了如何安装和使用 EJS。我们在应用程序中定义了视图引擎为 EJS，并在路由处理程序中将 index.ejs 渲染为响应。在渲染过程中，我们将一个对象传递给模板引擎，这个对象包含渲染模板所需的变量。
使用 EJS 替代 Pug
接下来，我们将展示如何使用 EJS 代替 Pug。我们将使用示例模板来说明这个过程：
Pug 模板
html
head
title= title
body
h1= messageEJS 模板
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>可以看到，EJS 模板看起来非常像普通的 HTML 文件。但是，注意到在 EJS 模板中我们使用了 <%= %> 语法，表示我们要将 JavaScript 表达式的结果作为 HTML 输出。这些表达式可以是变量、函数调用或表达式。
在 Express.js 应用程序中，我们可以按照之前的例子来使用 EJS 模板。唯一的区别是模板的扩展名是 .ejs，而不是 .pug：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - --------------- ----- --- - ---------- ---------------- --------- - ---------- ------------- -------- ------- ------------ ----- ---- -- - ------------------- - ------ ------ -------- ------ ----- --- --- ---------------- -- -- - -------------------- ------ --------- -- ---- ------- ---
在这个例子中，我们使用了渲染 index.ejs 模板的代码。注意到，我们将同样的数据对象 { title: 'EJS', message: 'Hello EJS!' } 传递到模板引擎。
总结
在本文中，我们详细介绍了如何使用 EJS 替换 Pug 作为 Express.js 的模板引擎。我们展示了如何安装 EJS、如何在 Express.js 应用程序中使用 EJS，以及如何使用 EJS 模板替换现有的 Pug 模板。通过这篇文章，你应该已经了解了使用 EJS 的基础知识，并可以将这些技术应用到你的实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64769e70968c7c53b0348322