背景
在前端开发中，我们经常需要在本地搭建一个 HTTP 服务器，用于提供静态资源访问。目前，有很多轻量级的 Node.js 搭建的静态资源服务器，如 serve、http-server、live-server等，它们都非常易用且高效。在这些工具之中，static-http-server 包则是一款非常简便和强大的静态资源服务器。
static-http-server 是一款基于 Node.js 开发的 http 静态文件服务器，它能够在几行命令中启动一个 Web 服务器，使我们可以通过浏览器访问本地项目工程的网页和 API。
在这篇文章中，我们将详细介绍如何使用 static-http-server 包搭建一个本地的静态服务器，并分享一些使用经验和注意事项。
安装
在使用 static-http-server 之前，我们需要在全局安装该包。可以通过以下命令完成安装：
npm install -g static-http-server
如果你之前已经安装过该包，则可以通过以下命令升级最新版：
npm update -g static-http-server
使用
安装完成后，我们可以通过以下命令启动静态资源服务器：
static-http-server
执行该命令后，static-http-server 会自动在当前目录中寻找并启动默认端口（8080）的 Web 服务器。也可以在执行该命令时，指定一个端口号：
static-http-server -p 3000
在启动成功后，浏览器中访问 http://localhost:8080，即可看到服务器中的文件列表。此时，我们可以通过页面上的链接进入到一个静态页面中，并通过点击链接来访问其中的其他页面。
此外，你可以在命令行中使用 q 键，来快速终止服务器的运行。
进阶
除了以上的基本使用方法，static-http-server 还支持以下高级功能：
跨域
在开发 Web 项目时，中间可能需要访问不同的接口地址，这时若跨域请求，则会有同源策略的限制，从而导致请求失败。要解决这个问题，可以在启动服务器时添加 --cors 参数，如下所示：
static-http-server --cors
通过以上命令，会允许通过服务器进行跨域访问。
模拟 API
在前端开发中，我们可能需要自己搭建一些本地 API，以便于测试和开发。在 static-http-server 中，我们可以创建一个 api.js 文件，并在其中编写自己的 API 路由地址映射。
例如，我们添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -------------------------- ----- ---- -
----- ---- - ---------------- -------- ------- ---
----------------------------- --------------------
--------------
---
----- ---- - -----
------------------- -------- -- -
---------------- ------ --------- -- ---- ----------
---然后在服务器启动时，添加参数如下：
static-http-server -p 4000 api.js
这时可在浏览器地址输入 http://localhost:4000/api 来访问自己搭建的 API 服务了。
高级使用
在 static-http-server 的 README 中，还提供了一些更高级的用法，如自定义日志、HTTPS、自定义规则、代理请求等。读者可以在实际开发过程中根据自己的需要，自行探索这些高级用法。
总结
在本文中，我们介绍了如何使用 static-http-server 包搭建一个静态资源服务器，并在包的基础上实现了跨域和模拟 API 的功能。随着前端技术的不断迭代，类似 static-http-server 的工具将不断出现。希望大家通过本文的学习，能够为自己的开发工作带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66482