作为前端工程师，我们时常需要搭建本地开发环境来进行调试和开发工作。而常见的本地开发环境搭建方式是使用 Web 服务器代理访问本地静态文件。在这个过程中，我们可以使用 npm 包 puer-proxy 来帮助我们更加高效地进行开发工作。
什么是 puer-proxy
pur-proxy 是一个基于 Node.js 的一个本地服务器中间件包，它可以帮助我们在本地启动一个静态文件服务器，并支持自动刷新页面及代理请求。
如何安装 puer-proxy
安装 puer-proxy 很简单，只需要在终端命令行输入如下命令即可完成安装：
$ npm install puer-proxy -g
如何使用 puer-proxy
使用 puer-proxy 也十分方便，只需要在终端命令行输入如下命令即可在当前目录下启动服务器：
$ puer
这样我们便可以在浏览器中打开 http://localhost:8000/ 并预览当前目录下的文件。
启用代理
在开发过程中，很多时候我们需要从后端拿到一些动态生成的数据，这时候我们可以启用代理，在本地开发环境中 proxy 后面的 api 接口请求会自动转发到设定的目标。可以通过 puer --proxy DOMAIN 来启用代理。
举个例子，假设我们的前端代码需要从 http://testapi.com 获取数据，我们可以这样启用代理：
$ puer --proxy http://testapi.com/
这样，在本地开发环境中，所有向 http://localhost:8000/api 的请求会自动代理到 http://testapi.com/api 上。
自定义端口号和游览器打开
我们可以通过如下命令指定端口和自动启动浏览器：
$ puer -p 8080 --open
这样，我们便可以在浏览器中打开 http://localhost:8080/ 并预览当前目录下的文件。
自定义路由
如果我们需要自定义路由，可以在入口文件目录下新建 puer.json 配置文件。在配置文件中，设置 route 即可自定义路由。如下为一个简单的示例，将访问 /api 的请求代理到 http://testapi.com/v1 上：
{
"route": [
{
"path": "/api",
"url": "http://testapi.com/v1"
}
]
}总结
通过 npm 包 puer-proxy，我们可以快速搭建本地开发环境，实现静态文件服务器、自动刷新浏览器、代理请求等功能，大大提高了前端开发的效率。在实际工作和开发过程中，我们可以根据自己的需要，自定义代理和路由，实现更加灵活的配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005553f81e8991b448d2735