在前端开发中，我们经常会使用模板引擎来快速渲染页面。而ejs是一种非常流行的模板引擎，通过引入ejs-compiled-loader这个npm包，我们可以更加优雅地使用ejs，让前端开发更加简单高效。
ejs-compiled-loader介绍
ejs-compiled-loader是一个webpack的loader，可以将ejs模板编译为JavaScript函数，并且使用webpack来打包这些函数，使得在浏览器端渲染页面的速度更快。使用这个npm包，可以避免在浏览器端使用ejs进行模板渲染的开销。
安装和使用
安装
可以通过npm安装ejs-compiled-loader：
npm install ejs-compiled-loader --save-dev
配置webpack
在webpack中，增加如下配置项：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- ----------------------
-------- -
-------- ------ -- --- ----
--------------- - -- ------------- ------- --- --
--------------- -----
--
--
--
--
--
-- ---
--使用
在代码中，可以引入ejs模板（比如template.ejs），并且使用require函数加载，如下所示：
const template = require('./template.ejs');这样，模板已经编译成了JavaScript函数，我们可以直接使用这个函数进行页面渲染：
const data = {title: 'hello', content: 'world'};
const html = template(data);
document.getElementById('root').innerHTML = html;示例代码
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- -------------------------------------- ------- -------------------------- ------- ------ ---- ---------------- ------- -------
-- -------------------- ---- ------- -- -------- ----- -------- - -------------------------- ----- ---- - - ------ -------------------------- -------- ------------- -- ----- ---- - --------------- ----------------------------------------- - -----
<!-- template.ejs --> <div class="header"><%=title%></div> <div class="content"> <%=content%> </div>
结语
ejs-compiled-loader是一个非常好用的npm包，让我们可以更加优雅地使用ejs，并且可以使用webpack来打包这些函数，使得在浏览器端渲染页面的速度更快。这个npm包的使用教程相对简单，但是需要注意的地方也比较多，需要认真阅读文档才能使用得更加熟练。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74287