前端开发中，本地开发环境的配置往往是一件费时费力的事情。而且每个项目的配置都有所不同，有时会产生重复劳动。于是，使用一款能够快速搭建本地开发环境的工具就成为了必要。
npm 包 zmok-server 就是这样的一款工具。它可以让你快速的创建本地开发服务器，并支持热更新与模拟接口请求。本文将从安装到使用，详细介绍如何使用 zmok-server。
安装
全局安装
在命令行中输入以下命令来全局安装 zmok-server：
npm install -g zmok-server
项目安装
在项目根目录中输入以下命令，将 zmok-server 安装到项目中：
npm install zmok-server --save-dev
使用
在项目中，可以在 package.json 中添加以下脚本：
"scripts": {
"start": "zmok-server ./src/mock",
}然后在命令行中使用以下命令来启动服务器：
npm start
启动成功后，命令行界面会显示服务器的地址与端口号。默认情况下，zmok-server 会使用 3000 端口。你可以在启动命令中加 -p 参数来指定端口号，例如：
"scripts": {
"start": "zmok-server ./src/mock -p 8888",
}这样服务器就会使用 8888 端口。
配置文件
zmok-server 支持通过配置文件来修改默认配置。在项目根目录中创建 zmok.config.js 文件，然后添加以下内容：
-- -------------------- ---- -------
-------------- - -
----- -----
----- ------
------------ -
-
----- -------
--
-
----- ---------
--
--
------------- -------------
-上述代码中，我们配置了端口号为 7777，禁用了自动打开浏览器功能，开启了 CORS 跨域支持，添加了日志中间件，并且指定了模拟数据的路径为 ./src/mock。
模拟接口请求
在开发中，我们经常需要模拟接口请求。zmok-server 提供了一个简单方便的方式来实现这个功能。在 mock 目录中添加一个 .json 文件，例如 user.json，然后在其中添加以下内容：
{
"name": "zmok-server",
"author": "Jack",
}启动 zmok-server 后，就可以通过访问 /user 接口来获取到该 json 数据了。
支持热更新
zmok-server 还支持热更新功能。在文件修改时，可以使浏览器自动刷新并展示最新的页面效果。在默认情况下，zmok-server 会启用热更新功能。如果你想禁用此功能，可以在配置文件中将 hotReload 值设为 false。
总结
zmok-server 是一款非常好用的前端开发工具。它能够快速搭建本地开发服务器，并支持热更新与模拟接口请求。通过本文的介绍，相信读者已经能够掌握如何使用 zmok-server 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80334