在前端开发过程中，静态资源的本地调试和部署是必不可少的环节。npm 包 serve-handler 提供了一种方便快捷的方式，可以将指定目录下的文件作为静态资源服务，并支持自定义路由、缓存策略等功能。
安装
在终端中执行以下命令即可安装：
npm install serve-handler --save-dev
使用
基本用法
在项目根目录下创建一个名为 public 的文件夹，并添加一些静态资源文件（如 HTML、CSS、JavaScript 等）。然后在终端中执行以下命令启动静态资源服务：
npx serve-handler public
该命令将会默认启动 public 文件夹下的静态资源服务，并打印出如下信息：
Serving at http://localhost:5000
在浏览器中访问该地址，即可查看到 public 文件夹下的静态资源文件。
自定义路由
除了默认的静态资源服务外，serve-handler 还支持自定义路由映射。例如，我们可以将路径为 /api 的请求转发到本地的另一个服务上。
首先，在项目根目录下创建一个名为 server.js 的文件，并编写以下代码：
const http = require('http');
http.createServer((req, res) => {
res.end('Hello World!');
}).listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});该代码会创建一个本地的 HTTP 服务器，监听在 http://localhost:3000 上，并返回一个字符串 'Hello World!'。接下来，在终端中执行以下命令启动静态资源服务：
npx serve-handler public --route "/api=http://localhost:3000"
该命令将会启动静态资源服务，并将路径为 /api 的请求转发给本地的 HTTP 服务器。在浏览器中访问 http://localhost:5000/api，即可查看到从本地 HTTP 服务器返回的 'Hello World!'。
缓存策略
serve-handler 还支持自定义缓存策略，可以根据文件类型、文件名等属性设置缓存时间，提高网站性能和用户体验。
例如，我们可以设置 HTML 文件的缓存时间为 1 小时，CSS 和 JavaScript 文件的缓存时间为 1 天。首先，在终端中执行以下命令启动静态资源服务：
npx serve-handler public --cache-control "html:max-age=3600, css/js:max-age=86400"
该命令将会启动静态资源服务，并设置缓存策略。在浏览器中访问静态资源文件时，将会按照相应的缓存时间进行缓存。
总结
serve-handler 是一款非常实用的 npm 包，可以方便快捷地为静态资源文件提供本地服务。通过自定义路由和缓存策略等功能，还能够进一步优化网站性能和用户体验。希望本文对大家在前端开发中使用 serve-handler 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51513