什么是 browser-sync-ejs
browser-sync-ejs 是一个 npm 包，用于自动化前端开发工作流程。它结合了 browser-sync 和 ejs 两个包的功能，可以实现自动刷新页面及动态渲染页面的效果。
browser-sync 可以监视文件的变化并自动刷新页面，而 ejs 是一种模板引擎，可以使我们动态生成 HTML 文件。
安装
在项目根目录下执行以下命令：
npm install browser-sync-ejs
使用方法
配置
在项目根目录下创建 bs-config.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
------ --------------------------- --------------------------
------ ------------------------
----------- -
-----------------------------
----- --------- - ---------
------- ----------
---- -------
---
--
--其中，files 指定了需要监听变化的文件，proxy 指定了需要代理的地址，middleware 指定了 browser-sync-ejs 的配置项。
root 指定了模板文件所在的目录，layout 指定了默认的布局文件名（可选），ext 指定了模板文件的后缀名。
使用
在项目根目录下执行以下命令：
browser-sync start -c bs-config.js
然后访问 http://localhost:3001 即可查看项目页面。
在修改项目文件后，页面会自动刷新，并且模板文件也会自动重新渲染。
示例代码
下面是一个简单的示例，根据不同的查询参数显示不同的页面内容：
-- -------------------- ---- ------- ---- --------------- --- --------- ----- ------ ------ ----- ---------------- ----------------------- ------------ ------- ------ -------- --- ----- -- ----------- ------ ------- ------ ------- -------
-- -------------------- ---- ------- ---- ----------------- --- --------- ----- ------ ------ ----- ---------------- ---------- ----- -- ------------- ------- ------ -- ------- ------- -- ------- -------
-- -------------------- ---- -------
-- ------
----- ------- - -------------------
----- --- - ----------
-- ---
------------ ----- ---- -- -
----- ---- - -
----- -------
---- ---
--
----- ----- - -----------------------------
----- ------- - ----------------- -- --------------
------------------- - ------- ---------- ------ ------- ---
---
-- ---
---------------- -- -- ------------------- -- ------- -- ---- ---------深度解析
browser-sync-ejs 的实现原理是将模板文件编译成 HTML 文件，并将其缓存起来。在页面刷新时，将缓存的 HTML 文件发送给客户端，避免了针对每个请求进行模板渲染的性能损失。
同时，该工具还提供了一些方便的辅助功能，如自动重启服务、静态文件服务器等。
学习意义
browser-sync-ejs 的使用可以大大减少前端开发中的重复工作量，提高开发效率和代码质量。同时，深入学习其源码，能够增强对前端开发工作流程的理解和掌握，为以后更好的开发和维护提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde521b