在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 文件。