随着前端技术的不断发展，我们在工作中也经常需要使用各种包来辅助我们完成项目的开发。其中，npm 就是常用的一个包管理器。在这篇文章中，我们将介绍一个名为 preview-server 的 npm 包，它可以帮助我们在本地启动一个静态服务器预览我们的项目。
安装 preview-server
在使用 preview-server 之前，我们需要先进行安装。打开终端，输入以下命令即可：
npm install preview-server -g
其中，-g 参数表示全局安装，即可以在任意目录下使用 preview-server 命令。
启动静态服务器
在安装完成后，我们可以使用 preview-server 命令来启动静态服务器，例如：
preview-server .
这个命令的作用是在当前目录下启动一个静态服务器。我们还可以指定一个具体的目录来启动服务器，例如：
preview-server /Users/yourname/project/
这个命令则是在指定的目录下启动一个静态服务器。
配置服务器
preview-server 默认启动的是一个简单的静态服务器，不过，我们也可以通过配置文件来定制服务器的行为。
在项目的根目录下，新建一个名为 preview-server.json 的配置文件，例如：
{
"port": 3000,
"proxy": {
"/api": "http://localhost:8080"
},
"history": true
}其中，port 参数表示服务器的端口号，默认是 8080；proxy 参数表示我们可以配置一个代理，将请求转发到指定的服务器上；history 参数表示是否开启 HTML5 history 模式，可以去除 URL 中的 # 号。
使用示例
下面我们来看一个具体的使用示例。假设我们有一个项目，里面包含以下文件：
.
├── index.html
└── js/
└── script.js我们在终端中进入该项目的根目录，输入以下命令来启动 preview-server：
preview-server .
此时，我们可以在浏览器中访问 http://localhost:8080 来预览我们的项目。
如果我们需要配置服务器的行为，我们可以在项目的根目录下新建一个 preview-server.json 文件，例如：
{
"port": 3000,
"proxy": {
"/api": "http://localhost:8080"
},
"history": true
}此时，我们再次输入 preview-server 命令来启动服务器，就会按照配置文件中的行为来启动服务器。
总结
使用 preview-server 可以帮助我们快速、方便地启动一个静态服务器，从而预览我们的项目。同时，通过配置文件，我们还可以定制服务器的行为，例如设置代理、开启 history 模式等。相信这篇文章已经让你了解了 preview-server 的基本用法，希望它能够在你的项目开发中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572e181e8991b448e9133