在 Web 开发过程中，我们经常需要创建一个本地服务器来运行我们的应用程序或网站，以便我们可以查看和测试其在不同设备和环境下的表现。 如果你使用 Rollup 进行前端开发，那么 rollup-plugin-server 就是一个非常实用的插件，可以帮助你快速地创建本地服务器。
在本篇教程中，我们将深入了解如何使用 rollup-plugin-server 来创建一个本地服务器，并将其中的代码进行详细讲解。
安装 rollup-plugin-server
首先，你需要安装 rollup-plugin-server，可以在命令行下使用 npm 进行安装：
npm install rollup-plugin-server --save-dev
在 Rollup 中配置 rollup-plugin-server
接下来，在你的 Rollup 配置文件中，你需要指定一个或多个入口文件和输出位置，并在 plugins 配置对象中加入 rollup-plugin-server 插件。最后，需要在 output 的 sourcemap 属性中指定为 true，以启用 sourceMap。
这是一个例子：
-- -------------------- ---- -------
------ ----- ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
---------- -----
--
-------- -
--------------
--
--上面这个例子中，rollup-plugin-server 的配置项是 serve("dist")，表示我们要将输出文件夹 dist 作为静态文件服务的根目录。
创建本地服务器
现在，当你打包 Rollup 输出到 dist 目录时，你可以使用以下命令来启动本地服务器：
npx rollup -c && npx serve dist
上面两个命令将在命令行中连续执行，目的是首先打包代码，再启动本地服务器。
rollup-plugin-server 的其他配置项
rollup-plugin-server 还有一些其他的配置项可以用来自定义服务器行为：
- host： 服务器监听的地址，默认是 "localhost"。
- port： 服务器监听的端口，默认是 10001。
- headers： 一个对象，包含要添加到响应头的键值对。
- contentBase： 服务器文件所在目录，相对于当前 Rollup 配置文件的路径，默认是 Rollup 配置文件所在的目录。
- historyApiFallback： 开启 HTML5 历史路由模式，如果找不到请求的文件，将返回
index.html页面（单页应用常用）。
例如，如果你希望服务器在其他端口上运行，你可以将配置项改为以下内容：
-- -------------------- ---- -------
-------
----- ------------
----- -----
-------- -
------------------------------ ----
--
------------ ---------
------------------- ----
--综合示例
下面是一个具体的实例，展示了如何使用 rollup-plugin-server 和其他的 Rollup 插件（rollup-plugin-commonjs 和 rollup-plugin-node-resolve）创建一个本地服务器。
-- -------------------- ---- -------
------ ----- ---- -----------------------
------ - ----------- - ---- -----------------------------
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
---------- -----
--
-------- -
-------------
-------- -----
------- -----
---
-----------
-------
-------- -
------------------------------ ----
--
------------ ---------- --------
------------------- -----
---
--
--总结
rollup-plugin-server 是一个非常实用的 Rollup 插件，可以帮助我们轻松创建本地服务器进行测试和调试。通过本篇教程，你已经了解如何使用 rollup-plugin-server 在 Rollup 中创建本地服务器，并对其各项属性进行了解。在下次开发中，你可以直接使用这个插件来创建本地服务器，以便更快地进行调试、测试和部署。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1b8b5cbfe1ea0611ec7