简介
Fly-serve 是一个基于 Fly.js 的一个 HTTP 服务器，可以简洁明了地搭建和开发网页服务器和 API 请求，支持 LiveReload 自动刷新和 Proxy 代理请求。
安装
我们首先需要在全局安装 Fly.js 和 fly-serve
npm install -g fly npm install -g fly-serve
使用
首先，我们在项目根目录下创建一个 flyfile.js 文件，用于配置 fly-serve 的一些参数
-- -------------------- ---- -------
----- ----- - --------------------
-------------- - -------
----- -----
----- -----------
------ -
--------- --------------------------
-
--port为配置 fly-serve 运行的端口号root为配置服务器文件目录的路径，这里我们指向项目中的public文件夹proxy用来实现 API 请求代理。比如我们请求的 API 接口是http://localhost:8080/api/v1，则可以通过这种方式实现代理：'/api/*': 'http://localhost:8080/$1'
接下来在终端输入以下命令启动服务器
fly
浏览器输入 http://localhost:3000，可以看到 ./public/index.html 文件的内容已经被加载了
LiveReload 自动刷新
在 flyfile.js 文件中加入以下代码可以实现页面的 LiveReload 自动刷新
-- -------------------- ---- -------
----- ----- - --------------------
-------------- - -------
----- -----
----- -----------
------ -
--------- --------------------------
--
----------- -
-------------------------------
----- -----
--
--
------ -------------------------------
--我们加入了两个新的参数：
middleware用于加入一些中间件。connect-livereload中间件开启了 LiveReload 功能watch用于监测某个文件的变化。fly-serve监测所有后缀为html,js,css的文件，当这些文件有变化时，会自动刷新浏览器
在 public/index.html 中加入以下代码
-- -------------------- ---- -------
------
------
----- ----------------
---------- ----- ------------
------- ------------------------------
-------
------
--------- --- -----------
-------
-------此时，我们只需要在终端运行 fly 命令，可以在浏览器上观察到页面的自动刷新效果了
Proxy 代理请求
fly-serve 提供了 Proxy 的功能，可以很方便地在开发时模拟 API 请求，来检验我们的前端代码是否满足需求
在 flyfile.js 文件中加入以下片段
-- -------------------- ---- -------
-------------- - -------
----- -----
----- -----------
------ -
--------- -
------- -------------------------
-------- ----- -- -
------- - ------------------------- ----
-
-
-
--target是代理的链接地址，测试时我们可以用Postman之类的工具发送一个假请求来测试一下代理的效果rewrite则是对发送的请求进行变形，比如/api/v1原本是由后端处理的，改了之后则会变成直接请求http://localhost:8080/v1
在 public/index.html 中加入以下代码
-- -------------------- ---- -------
------
------
----- ----------------
---------- ----- ------------
------- ---------------------------------------------------------------
-------
------
---------------------
-----------
------- -----------------------
---------------------------- -
------------- ---------------- -
----------------------
---
---
---------
-------
-------点击按钮，我们的浏览器控制台中就会输出请求返回的数据了
小结
到此，我们已经初步掌握了 fly-serve 的使用，可以通过配置文件及对应 API 理解并且快速构建一个服务器型的应用，希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555b181e8991b448d2cc2