在将数据插入EJS文件上，创建HTML并在本地保存之后，如何使用EJS来使用EJS？

Question

那就是我想要的流程：

1-在一个文件夹（HTML文件夹）上有一个普通的HTML文件

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

上插入我想要的数据

3-在EJS文件4 -到HTML文件，因此现在我将拥有“相同”的HTML文件，但是现在使用我想要的所有数据。

5-将此HTML存储在AWS S3上（或者现在是本地）

Answer 1

将EJS文件渲染到html markup

^{来源：带有node.js}

ejs 是一种使用JavaScript生成HTML的模板语言。这篇文章将说明如何将node.js与Typescript一起使用将EJS文件渲染到HTML标记中。请确保您有 node.js and npm 首先安装。如果您不熟悉打字稿，请阅读我的帖子，描述如何使用npm compile typescript 。

EJS

首先创建一个名为index.ejs的新EJS文件。该文件将是用于生成index.html的模板。如果模型被传递到模板中，则将其作为段落渲染。

<!-- Sample Page -->

<h1>Sample Page</h1>

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

package.json

如果您还没有包装。JSON创建了您可以通过运行命令NPM Init并遵循提示来创建一个。

您将需要您的软件包。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"
  }
}

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

Node.js

创建一个名为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);

第一个导入是 util 模块，以便我们可以使用 prosisisify 函数。然后导入 fs 用于文件系统访问的模块。在使用FS模块中的三个函数之前，我们可以承诺它们允许使用异步/等待而不是嵌套回调。最后一个是针对EJS的，由于渲染文件函数默认情况下返回承诺，因此我们不需要使用Promiseify。

在下方，导入语句添加了一个名为Render的异步函数。这是将HTML输出生成并写入名为index.html的文件的地方。它需要将其标记为异步函数，以便可以使用关键字等待。然后确保调用该函数，以便将要添加的代码执行。

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

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

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

这将创建一个名为DIST的新目录，其中将保存HTML输出。通过传递递归属性，我们可以确保创建父文件夹，即使不需要。创建DIST文件夹后，我们可以使用EJ将索引。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编译器。这将将打字稿编译到JavaScript中，以便可以由Node.js使用。将tsconfig文件添加到与render.js脚本同一文件夹中。

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

我们还需要将脚本添加到package.json文件之前创建的脚本。该脚本将编译渲染。ts，然后使用节点运行。您的软件包。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运行渲染来在终端窗口中运行。确保从包装的目录中运行此命令。运行渲染脚本后，您现在应该看到一个名为dist的文件夹，其中包含一个名为index.html的文件。

index.html的内容应该看起来像这样：

Sample Page

请注意，在HTML输出中不包含包含模型内容的条件块。这是因为在渲染脚本中，该模型被称为false。现在，我们将创建一个将对象作为模型传递，其中一些示例内容到示例页面。

在渲染.ts文件中，先前创建的是导入语句之后，创建一个对象并将属性添加到名为Content的属性，并将值设置为“内容”示例。

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

然后将此对象传递到ejs.renderfile函数而不是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();

将模型对象传递到模板中，我们现在应该看到在index.html输出文件中呈现的条件块。再次运行命令NPM运行渲染。

DIST文件夹中的index.html文件现在应该看起来像这样：

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

index.ejs模板现在可以根据渲染文件中配置的模型对象渲染动态HTML内容更新的index.html文件。