前言
在前端开发过程中，我们通常使用模块打包工具来将多个模块打包成一个文件。 Rollup 是一款基于 ES6 模块语法的 JavaScript 模块打包器，可以将多个模块打包成一个文件，并支持 Tree-shaking 优化。同时，rollup-plugin-livereload 是一款可实现热重载的 Rollup 插件，它能够自动监测文件变化并重新加载页面，提高开发效率。
在本文中，我们将详细介绍如何使用 rollup-plugin-livereload 进行热重载的配置和使用方法，以及一些注意事项。
安装 rollup-plugin-livereload
首先，我们需要安装 rollup-plugin-livereload，可以通过以下命令进行安装：
npm install --save-dev rollup-plugin-livereload
配置 rollup-plugin-livereload
接下来，我们需要在 Rollup 配置文件中引入 rollup-plugin-livereload 并进行配置。以 rollup.config.js 文件为例：
-- -------------------- ---- -------
------ ---------- ---- ---------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
------------
-
--在上述配置中，我们首先引入了 rollup-plugin-livereload，然后在 plugins 中加入了 livereload()，表示启用该插件。当然，我们还可以通过传递一些配置项来实现更加灵活的使用。
livereload({
watch: 'dist' // 监听 dist 目录下的文件
})使用 rollup-plugin-livereload
在配置完成后，我们可以通过以下命令启用 Rollup：
rollup -c -w
其中 -c 表示指定 Rollup 配置文件为 rollup.config.js，-w 则表示启用监听模式，即进行持续打包并监测文件变化。
启动成功后，我们可以打开浏览器访问需要热重载的页面，并添加以下代码：
<script src="/dist/bundle.js"></script>
这里的 /dist/bundle.js 文件路径应与 Rollup 配置文件中 output.file 字段保持一致。之后，每次修改源码保存后，页面将自动刷新并加载最新的 JavaScript 代码。
注意事项
在使用 rollup-plugin-livereload 进行开发时，需要注意以下几点：
- 需要启动监听模式：在启动 Rollup 时需要加上
-w参数以启动监听模式。 - 需要手动添加 script 标签：需要手动将打包后的 JavaScript 文件引入到 HTML 文件中。
- 只能监听本地文件：由于 rollup-plugin-livereload 使用 WebSocket 进行与浏览器间的通信，因此只能监听本地文件变化，无法监听远程服务器上的文件变化。
示例代码
完整的示例代码可以在以下仓库中找到：
https://github.com/rollup/plugins/tree/master/packages/livereload
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54372