在前端开发中，我们经常需要将代码打包并启动一个本地的 Web 服务器来进行调试和测试。而 rollup-plugin-serve 是一个非常方便的 npm 包，可以帮助我们快速搭建一个本地服务器。
安装
在使用 rollup-plugin-serve 之前，需要先安装它。可以通过以下命令进行安装：
npm install rollup-plugin-serve -D
配置
安装完成后，在 rollup 的配置文件中添加如下内容：
-- -------------------- ---- -------
------ ----- ---- ----------------------
------ ------- -
-- ---
-------- -
-- ---
-------
------------ --- -- -----------------
----- ----- -- --------------
--------- ------------- -- ---------
--
-
-上述代码中，contentBase 表示静态文件所在的根目录；port 表示服务器监听的端口号；openPage 表示默认打开的页面。你也可以根据自己的需要进行修改。
使用
配置完成后，通过以下命令启动本地服务器：
npx rollup -c -w
其中 -c 表示指定配置文件，-w 表示启用监听模式（即当源代码发生变化时，自动重新构建）。
然后访问 http://localhost:8080 （如果你没有修改端口号）即可看到服务器启动的效果。
示例代码
下面是一个简单的示例，假设你的项目结构如下：
my-project/
|- dist/
|- src/
|- index.js
|- index.html
|- style.css
|- rollup.config.js其中 src/index.js 和 src/index.html 分别为入口 JavaScript 和 HTML 文件，src/style.css 是一个 CSS 文件。在 rollup.config.js 中添加以下内容：
-- -------------------- ---- -------
------ ----- ---- ----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
-------
------------ ------
----- -----
--------- -------------
--
-
-然后在终端中输入以下命令：
npx rollup -c -w
这时候就可以通过 http://localhost:8080 访问网站了。在浏览器中打开控制台，可以看到 src/index.js 和 src/style.css 已被成功加载。
总结
通过使用 rollup-plugin-serve，我们可以快速搭建一个本地服务器，方便我们进行调试和测试。在实际开发中，我们可以根据自己的需要进行配置，并结合其他插件一起使用，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54371