在前端开发中，自动化构建和热重载是非常重要的工具。在这方面，浏览器同步（BrowserSync）是一个流行的工具，它可以让你在多个设备上同步加载，滚动和点击，同时实时更新您的代码。
在这篇文章中，我们将介绍一个npm包connect-browser-sync，它为Node.js应用程序提供了一种简单且灵活的方式来集成BrowserSync功能。
安装
首先，让我们安装connect-browser-sync。在命令行中输入以下命令：
npm install connect-browser-sync --save
使用
连接（connect）是一个Node.js Web框架，它允许您编写基于中间件的Web应用程序。Connect-Browser-Sync包就是一个Connect中间件。
下面让我们看看如何使用connect-browser-sync来创建一个Node.js服务器，并启动BrowserSync实例。
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ------------------------
----- ----------- - ------------------------
----- ------------------ - --------------------------------
-- -- ------- ---
----- --- - ----------
-- ---------
----------------------------- - ------------
-- -- ----------- ---
----------------------------------------
------ --------------------
--------- --------
------------ --
------- -----
----- ------
-----
-- -----
---------------- -- -- -
------------------- -- ------- -- ------------------------
---在上述示例中，我们首先创建了一个Connect app，并使用serve-static中间件来为public目录下的静态文件提供服务。然后，我们添加了一个connect-browser-sync中间件，它将BrowserSync实例集成到我们的应用程序中。
要注意的是，我们在browserSync函数中传递了一些选项来配置BrowserSync实例。这里，我们指定了要监视哪些文件，以及在修改时是否要通知用户。
最后，我们启动了Node.js服务器并监听端口3000。现在，当您访问http://localhost:3000时，您的浏览器窗口将自动刷新！
学习和指导意义
通过本文，您已经学习了如何使用connect-browser-sync将BrowserSync集成到Node.js Web应用程序中。这个包提供了一种简单的方式来实现热重载，因此它对于开发人员非常有用。
此外，学习如何使用connect-browser-sync还有助于深入了解Node.js Web框架中间件的工作原理。这些概念是Web开发中不可或缺的基础知识。
最后，希望本文对您有所帮助，并且您能够在日常开发中充分利用connect-browser-sync的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54621