在前端开发中，我们常常需要使用打包工具将代码进行压缩合并等操作，同时调试也是一个重要的环节。在这个过程中，使用 live-server 实时预览页面的修改也是必不可少的一步。借助于 rollup-plugin-live-server npm 包，我们可以在 rollup 中方便地启用 live-server 并进行实时预览和调试。
什么是 rollup-plugin-live-server
rollup-plugin-live-server 是一个 rollup 插件，它能够启动 live-server 服务，并在 rollup 构建完成时自动刷新页面。该插件与 rollup 密切集成，使得使用 rollup 进行项目开发更加简单和高效。
为什么要使用 rollup-plugin-live-server
使用 live-server 可以在本地快速启动一个 web 服务器，实时预览并调试页面的改动，从而节约大家的时间和精力。而在使用 rollup 进行项目构建时，rollup-plugin-live-server 能够自动监听到 rollup 构建过程结束，然后使用 live-server 刷新页面让我们无需手动刷新页面，提高了工作效率。
如何使用 rollup-plugin-live-server
步骤 1：安装 rollup-plugin-live-server
在终端中执行以下命令安装 rollup-plugin-live-server。
npm install rollup-plugin-live-server --save-dev
步骤 2：编写 rollup 配置文件
在项目根目录下创建 rollup.config.js 配置文件，并添加以下代码：
-- -------------------- ---- -------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ---------- ---- ---------------------------
------ ----- ---- ----------------------
------ - ---------- - ---- ---------------------------
------ ------- -
------ ---------------
------- -
----- ---------------
------- -----
--
-------- -
----------
-----------
-------------------
-------
----- -----
-------- -----
------------ ---------
------------------- -----
---
------------
----- -------
----- ------------------
----- -----
----- ----
--
-
--其中，liveServer 方法的参数如下所示：
root：静态文件服务的根目录，默认为项目根目录。file：自动打开的 HTML 文件，相对于root路径。port：服务端口，默认为 8080。open：自动开启默认浏览器，并访问 host:port，默认为 true。
步骤 3：运行 rollup
使用以下命令来启动 rollup，开始编译和监听文件变化。
npx rollup -c --watch
示例代码
下面是一个简单的示例，包括一个 index.html 文件以及一个 app.js 文件。
index.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ------------
-------
------
--------- -------------------------------
------- -----------------------
-------
-------app.js：
console.log('Hello rollup-plugin-live-server!');在项目根目录下执行以下命令后，会在浏览器中自动打开并显示该页面。
npx rollup -c --watch
结语
rollup-plugin-live-server 成为了前端开发时的一款很好用的 npm 包之一。在实际的项目中，rollup-plugin-live-server 的应用也能够帮助我们提高工作效率，更快更好地完成前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f5421dc8250f93ef890049d