在前端开发中，有时候需要搭建一个本地的服务来测试打包后的代码以及调试前端代码。而常用的方式就是使用轻量级的本地服务器工具。其中，npm 包 jserve 是一款非常优秀的本地服务器工具。本文将介绍 jserve 的安装和使用方法以及一些实际的应用场景。
安装
安装 jserve 只需要在命令行中输入以下代码即可：
npm install -g jserve
安装完成后，jserve 就可以在命令行中使用了。
使用方法
jserve 的使用非常简单，只需要在终端中输入以下命令：
jserve
这条命令会在当前目录下启动一个场地服务器，并将当前目录作为根目录。此时，我们可以在浏览器中输入 localhost:8080 访问该目录下的文件。
如果需要指定根目录，可以与之前的命令中加上根目录的路径：
jserve /path/to/root/dir
有时候我们需要在本地服务器中使用 HTTPS 协议，那么只需要在启动 jserve 时增加 --https 选项即可：
jserve --https
另外， jserve 支持更改端口以及开启 Token 认证功能。具体命令如下：
jserve --port 9999 --token '123456'
实际应用
jserve 的应用场景非常广泛，可以在本地对纯静态文件进行测试，也可以配合各种前端框架做项目开发。下面我们就介绍一些实际的应用场景。
静态资源访问
有时候我们需要在本地服务中访问某个文件夹下的静态文件，此时可以在该文件夹中运行以下命令：
jserve
此时我们可以通过 localhost:8080 访问该文件夹下的静态文件。
React 项目开发
在 React 项目中，我们通常使用 create-react-app 来搭建脚手架。但是 create-react-app 启动后的本地服务器并不支持 CORS，这时候可以在根目录下增加一个 jserv.config.js 文件来配置 jserve。具体配置如下：
module.exports = {
port: 3000,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET, POST',
},
};在配置文件中，我们可以指定 jserve 的端口以及访问时需要携带的头文件。
PWA 应用开发
在 PWA 应用开发中需要在本地搭建 HTTPS 服务器，这时候我们可以使用 jserve。只需要在运行 jserve 时加上 --https 选项即可。
jserve --https
结语
jserve 是一款非常优秀的本地服务器工具，简单易用又功能丰富。在前端开发中， jserve 可以应用于各种场景，大大提高了开发效率，推荐给大家使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71752