rollup-plugin-browsersync 是一个基于 Rollup 的自动刷新浏览器插件。它可以方便地帮助前端开发者在本地搭建一个静态服务器，监听文件变化，并且能够自动刷新浏览器，以提高前端研发效率。本篇文章将介绍如何使用这个 npm 包来打造一个舒适高效的前端开发环境。
安装
首先，要安装 rollup-plugin-browsersync。你可以使用 npm 或 yarn 安装这个模块：
npm install rollup-plugin-browsersync --save-dev
或者
yarn add rollup-plugin-browsersync --dev
使用
rollup-plugin-browsersync 模块的使用非常简单。在你的 Rollup 配置文件中，只需在 plugins 字段里添加这个插件，然后设置相应的选项即可。
-- -------------------- ---- -------
------ ----- ---- ---------------------
------ ---------- ---- --------------------------
------ ----------- ---- ---------------------------
------ - ------ - ---- ----------------------
------ ------- -
------ ---------------
------- -
----- ---------------------
------- ------
---------- -----
--
-------- -
-------
------------ -------
----- ------------
----- -----
---
-------------
-------------
------ -----------------
----- ------
---
---------
--
-上面的配置文件中，我们在 plugins 里添加了三个插件：rollup-plugin-serve、rollup-plugin-livereload 和 rollup-plugin-browsersync。serve 和 livereload 模块用于在本地搭建一个静态服务器，并监听文件变化，然后自动刷新浏览器。
配置选项
rollup-plugin-browsersync 的配置选项有很多，下面列出一些常用的配置项：
server
该选项指定了 Browsersync 静态服务器的根目录。默认为当前项目下的目录。
files
该选项指定了要监听变化的文件。默认为整个项目下的所有文件。
proxy
该选项指定了 Browsersync 代理的地址，将本地服务器映射到指定地址，以方便在网络环境下查看网站。
port
该选项指定了 Browsersync 启动的端口号。
open
该选项用于指定是否自动打开浏览器，可以设置为 true 或者 false。默认为 true。
browser
该选项用于指定要打开的浏览器名称，如 Google Chrome、Firefox 等。
更多配置选项请参考官方文档：https://browsersync.io/docs/options。
示例代码
下面给出一个完整的示例，你可以将其保存为 rollup.config.js，然后使用 rollup 执行构建命令即可，在浏览器端输入 http://localhost:3000 查看页面效果。
-- -------------------- ---- -------
------ ----- ---- ---------------------
------ ---------- ---- --------------------------
------ ----------- ---- ---------------------------
------ - ------ - ---- ----------------------
------ ------- -
------ ---------------
------- -
----- ---------------------
------- ------
---------- -----
--
-------- -
-------
------------ -------
----- ------------
----- -----
---
-------------
-------------
------ -----------------
----- ------
---
---------
--
-总结
在前端开发中，自动刷新浏览器是一个非常实用的工具。rollup-plugin-browsersync 模块可以帮助我们在本地搭建一个静态服务器，并监听文件变化，从而实现自动刷新浏览器的功能。希望通过本篇文章的介绍能够让你更好地了解和使用这个模块，提高你的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaf4b5cbfe1ea0612512