在前端开发中，我们常常会使用到模板引擎来简化我们的工作，ejs 就是其中的一种比较流行的模板引擎。而使用 ejsify 这个 npm 包，可以让我们更加便捷地使用 ejs。
什么是 ejsify
ejsify 是一个 Browserify transform，它将 EJS 模板编译成 JavaScript 函数，使其能够用于浏览器端的 JS 应用程序中。它封装了 EJS，使之可以在浏览器端进行使用。
如何安装 ejsify
使用 npm 进行安装：
--- ------- ------ ----------
或者在 package.json 中添加以下依赖：
------------------ - --------- -------- -
如何使用 ejsify
使用 ejsify 将 EJS 模板编译成 JavaScript 函数，需要在浏览器端的 JS 应用程序中调用这个函数。
假设我们要使用 EJS 渲染一个列表，包含多项：
----
-- ------- ---- --------------- ---- - --
------- -------- -------
-- - --
-----首先要在 JS 文件中引入 ejsify：
--- ------ - ------------------
然后再通过 ejsify(file, options) 将模板文件编译成 JS 函数：
--- -------- - ------------------------------ - ------- ----- -------- ---- ---
其中，第一个参数是指定模板文件的路径，第二个参数是一个可选的选项对象，常用的选项如下：
client: 是否将编译后的 JS 函数作为客户端代码输出，默认为false，即将其作为 CommonJS 模块输出。replace: 是否替换原始的 EJS 文件，默认为false，即保留原始 EJS 文件。
编译完成后，我们可以将其保存为一个 JS 文件：
--- -- - -------------- ----------------------------------- ----------
然后在 HTML 文件中加载这个 JS 文件：
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
---- ----------------
------- -------------------------------
--------
--- ----- - --------- -------- ---------
--- ---- - -------------------------------- ------ ----- ---
----------------------------------------- - -----
---------
-------
-------最后，我们可以在 JS 文件中调用编译后的 JS 函数，将数据传入，生成最终的 HTML 结果。
示例代码
下面是一个完整的示例代码，演示了如何使用 ejsify 渲染一个列表：
templates/list.ejs
----
-- ------- ---- --------------- ---- - --
------- -------- -------
-- - --
-----src/index.js
--- -- - -------------- --- ------ - ------------------ --- -------- - ------------------------------ - ------- ----- -------- ---- --- ----------------------------------- ---------- --- ----- - --------- -------- --------- --- ---- - -------------------------------- ------ ----- --- ----------------------------------------- - -----
index.html
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
---- ----------------
------- -------------------------------
-------
-------总结
ejsify 是一个非常实用的 npm 包，它能够让我们更加便捷地使用 EJS 模板引擎。通过本文的介绍，相信大家已经掌握了 ejsify 的基本使用方法，能够在实际的项目中运用它，简化自己的工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/104553