npm 包 browsersync-ssi 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 browsersync-ssi 使用教程

在前端开发中，我们经常需要在本地调试页面，而浏览器是不支持 SSI（服务器端嵌入）语法的，这就意味着我们无法在本地进行 SSI 的测试，而只能在服务器部署后才能看到效果。为了解决这个问题，我们可以使用一个 npm 包叫做 browsersync-ssi。

什么是 browsersync-ssi

browsersync-ssi 实际上是基于浏览器同步工具 BrowserSync 的一个插件，它可以让我们在本地静态页面中使用 SSI 语法，并在浏览器中实时渲染。简单来说，它可以让我们在本地浏览器里模拟服务器环境，使开发更加方便。

安装和使用

首先，我们需要在项目中安装 BrowserSync 和 browsersync-ssi。运行以下命令：

--- ------- ------------ --------------- ----------

安装完成后，我们可以在 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