在EJS文件中插入数据后，如何使用EJS创建一个HTML并保存在本地？

Question

这就是我想要的流程：

1 - 在一个文件夹（HTML 文件夹）上有一个正常的 HTML 文件

2 - 获取此文件，将其转换为 EJS 文件

3 - 在 EJS 文件中插入我想要的数据

4 - 将该 EJS 文件转换回 HTML 文件，所以现在我将拥有“相同”的 HTML 文件，但现在包含我想要的所有数据。

5 - 将此 HTML 存储在 AWS S3 上（或暂时存储在本地）

Answer 1

将 EJS 文件呈现为 HTML 标记

^{来源：使用 Node.js 渲染 EJS 文件}

EJS是一种模板语言，它使用 JavaScript 生成 HTML。这篇文章将说明如何使用 Node.js 和 TypeScript 将 EJS 文件渲染为 HTML 标记。 请确保您先安装了Node.js和npm 。 如果您不熟悉 Typescript，请阅读我描述如何使用 npm 编译 TypeScript 的帖子。

EJS

首先创建一个名为 index.ejs 的新 EJS 文件。 该文件将是用于生成 index.html 的模板。 如果将 model 传递到模板中，它会将内容呈现为段落。

<!-- Sample Page -->

<h1>Sample Page</h1>

<% if (model) { %>
  <%= model.content %>
<% } %>

package.json

如果您还没有创建 package.json，您可以通过运行命令 npm init 并按照提示操作来创建一个。

你需要你的 package.json 来包含这些包：

{
  "name": "package-name-goes-here",
  "version": "0.0.0",
  "devDependencies": {
    "@types/ejs": "^2.6.2",
    "@types/node": "^11.9.4",
    "ejs": "^2.6.1",
    "typescript": "^3.3.3333"
  }
}

您还可以复制 devDependencies 部分并运行命令npm install而不是一次安装一个。

Node.js

创建一个名为 render.ts 的新文件 TypeScript。 然后添加以下代码以导入我们将使用的模块。

//imports
import util = require("util");
import fs = require("fs");
import ejs = require("ejs");
//promisify
const mkdir = util.promisify(fs.mkdir);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);

首先导入的是util模块，这样我们就可以使用promisify function。然后导入fs模块进行文件系统访问。 在使用 fs 模块中的三个函数之前，我们可以承诺它们允许使用异步/等待而不是嵌套回调。 最后一个用于 EJS，由于渲染文件 function 默认返回 promise，我们不需要使用 promisify。

在导入语句下面添加一个名为 render 的异步 function。 这是生成 HTML output 并将其写入名为 index.html 的文件的地方。 它需要标记为异步 function 以便可以使用关键字 await。 然后确保调用 function 以便执行要添加的代码。

async function render() {
  try {
  } catch (error) {
    console.log(error);
  }
}
render();

在渲染我们的 EJS 文件之前，我们需要一个文件夹来放置 output。因此将以下内容添加到我们的渲染 function：

await mkdir("dist", { recursive: true });

这将创建一个名为 dist 的新目录，其中将保存 html output。 通过传递递归属性，我们可以确保创建父文件夹，即使没有必要。 创建 dist 文件夹后，我们可以使用 EJS 将 index.ejs 模板呈现为 HTML。生成的 HTML 字符串然后写入 dist 文件夹中名为 index.html 的文件。

此时你的 index.ts 文件应该是这样的：

//imports
import util = require("util");
import fs = require("fs");
import ejs = require("ejs");
//promisify
const mkdir = util.promisify(fs.mkdir);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
async function render() {
  try {
    //create output directory
    await mkdir("dist", { recursive: true });

    //render ejs template to html string
    const html = await ejs
      .renderFile("index.ejs", { model: false })
      .then((output) => output);
    //create file and write html
    await writeFile("dist/index.html", html, "utf8");
  } catch (error) {
    console.log(error);
  }
}
render();

为了运行这个脚本，我们需要添加一个 tsconfig.json 文件来配置 TypeScript 编译器。 这会将 TypeScript 编译成 JavaScript，以便 node.js 可以使用它。将 tsconfig 文件添加到与 render.js 脚本相同的文件夹中。

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "rootDir": "./",
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["render.js"]
}

我们还需要将脚本添加到之前创建的 package.json 文件中。 该脚本将编译 render.ts 然后使用节点运行它。 您的 package.json 应如下所示：

{
  "name": "package-name-goes-here",
  "version": "0.0.0",
  "scripts": {
    "render": "tsc && node dist/render.js"
  },
  "devDependencies": {
    "@types/ejs": "^2.6.2",
    "@types/node": "^11.9.4",
    "ejs": "^2.6.1",
    "typescript": "^3.3.3333"
  }
}

EJS 渲染 HTML

通过键入命令 npm run render，可以在终端 window 中运行渲染脚本。 确保从 package.json 所在的目录运行此命令。 运行渲染脚本后，您现在应该看到一个名为 dist 的文件夹，其中包含一个名为 index.html 的文件。

index.html 的内容应该是这样的：

Sample Page

请注意，在 index.ejs 模板中，包含 model 内容的条件块未包含在 html output 中。这是因为在渲染脚本中，model 被作为 false 传入。 现在我们将创建一个 object 作为 model 传递给示例页面的一些示例内容。

在先前创建的 render.ts 文件中，在 import 语句之后，创建一个 object 并向其添加一个名为 content 的属性，并将值设置为内容样本。

const pageModel = {
  content: "This is some sample content. Located on the sample page.",
};

然后将这个 object 传递给 ejs.renderFile function 而不是 false。 render.ts 文件应如下所示：

//imports
import util = require("util");
import fs = require("fs");
import ejs = require("ejs");
//promisify
const mkdir = util.promisify(fs.mkdir);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);

const pageModel = {
  content: "<p>This is some sample content. Located on the sample page.</p>",
};
async function render() {
  try {
    //create output directory
    await mkdir("dist", { recursive: true });

    //render ejs template to html string
    //pass pageModel in to render content
    const html = await ejs
      .renderFile("index.ejs", { model: pageModel })
      .then((output) => output);
    //create file and write html
    await writeFile("dist/index.html", html, "utf8");
  } catch (error) {
    console.log(error);
  }
}
render();

通过将 model object 传递到模板中，我们现在应该可以看到在 index.html output 文件中呈现的条件块。 再次运行命令 npm run render。

dist 文件夹中的 index.html 文件现在应该如下所示：

<h1>Sample Page</h1>
<p>This is some sample content. Located on the sample page.</p>

index.ejs 模板现在可以根据 render.ts 文件中配置的 model object 渲染动态 HTML 内容，并在每次更改后运行 npm run render 生成更新的 index.html 文件。