在前端开发中，我们经常需要在本地调试页面，而浏览器是不支持 SSI（服务器端嵌入）语法的，这就意味着我们无法在本地进行 SSI 的测试，而只能在服务器部署后才能看到效果。为了解决这个问题，我们可以使用一个 npm 包叫做 browsersync-ssi。
什么是 browsersync-ssi
browsersync-ssi 实际上是基于浏览器同步工具 BrowserSync 的一个插件，它可以让我们在本地静态页面中使用 SSI 语法，并在浏览器中实时渲染。简单来说，它可以让我们在本地浏览器里模拟服务器环境，使开发更加方便。
安装和使用
首先，我们需要在项目中安装 BrowserSync 和 browsersync-ssi。运行以下命令：
npm install browser-sync browsersync-ssi --save-dev
安装完成后，我们可以在 package.json 中的 devDependencies 中看到这两个包的版本。接下来，我们需要在 gulpfile.js 或者 webpack.config.js 中配置 BrowserSync 和 browsersync-ssi。
Gulp
-- -------------------- ---- -------
--- ---- - ----------------
--- ----------- - ---------------------------------
--- --- - ---------------------------
------------------ ---------- -
------------------
------- -
-------- -----
----------- -----
-------- --------- - ----
---- --------
--
-
---
------------------------------------ --------------------
---------------------------------- --------------------
--------------------- ------------------------ --------------------
---以上配置中，使用了 BrowserSync 的 create() 方法来创建了一个实例，然后使用 server 参数指定本地文件夹根目录为 ./，并使用中间件 ssi() 来解析 SSI 语句。中间件的参数中，baseDir 用来指定 SSI 文件所在的目录，ext 则用来指定 SSI 文件的后缀名。
在 serve 任务中，我们使用了三个 watch() 方法来监听 CSS、JavaScript 和 HTML 文件的变化，一旦文件发生变化，就会在浏览器中自动刷新。
webpack
-- -------------------- ---- -------
--- ----------- - ---------------------------------
--- --- - ---------------------------
-------------- - -
---------- -
----------- ------- -
-----------------------------
--
----- ----------
----- -----
------ --------------
------- -----
---- -----
----------------- -----
------------ -----
------ ------------- -
-------------
-------- --------- - ----
---- --------
----
--
------ --
-
-以上配置中，我们在 devServer 中使用了 before 参数来监听 HTML 文件的变化。然后使用 setup 参数来指定中间件并解析 SSI 语句。在 contentBase 中指定了本地文件夹根目录，其中的 port、host、proxy 都是可选配置项，用于指定服务器端口和代理。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
---------------------- ----------
------------ ----------------- ---
-------
------
------------ ------------------- ---
-----
------------------- -------
---------------------------
------
------------ ------------------- ---
-------
-------在以上示例代码中，我们使用了 SSI 的 include 语句，将页面内容拆分成多个部分，通过 ssi() 中间件的解析，在浏览器中自动加载。
总结
通过 browsersync-ssi，我们可以在本地进行 SSI 的测试，而不需要在服务器端进行部署，大大提高了开发效率。本文通过 Gulp 和 webpack 两种方式简单介绍了其的使用方法，希望对前端开发的同学们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51a1