Web 开发中的利器 - Webpack（5）构建 web service 服务 - json-server

look_w

构建                web service 服务 - json-serverjson-server ( )，是用来在 web 端构建 web service                服务的工具。它将 json 数据结构与 web server 的概念结合在起来，从而极大地简化了 web service 服务的开发工作。
回想以前，我们构建 web service 服务的时候，不得不借助一些服务器端的技术或者框架来实现，例如 Apache CXF ( )。同时，让web                service 能够运行在 web 端，还需要容器本身的支持（例如Tomcat，WebSphere容器）。也就是说，搭建 web service                服务，我们不仅需要熟悉一些框架的结构和 API 接口，还需要完成容器的搭建与服务的部署工作，而这些跟实际的开发工作其实并没有直接的联系。
json-server 的用法
随着 NodeJs 的出现，一些框架与工具开始采用 javascript 来实现。其中 json-server 工具的出现，极大的简化了构建 web                service 服务的工作。使用 json-server 构建 web service 服务，我们只需要编写如下的 json 文件
清单 17. 使用 json-server               

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{ "posts": [     {         "id": 1,         "title": "json-server",         "author": "typicode"     } ], "comments": [     {         "id": 1,         "body": "some comment",         "postId": 1     } ], "profile": {     "name": "typicode" } }

现在启动 json server

1	$ json-server --watch db.json

如果需要修改 server 的服务端口，可以这样

1	$ json-server --watch db.json --port 3004

json-server 构建静态文件服务器
方法一：建立 ./public 文件夹

1	mkdir public echo 'hello world' > public/index.html json-server db.json

方法二：使用--static 参数

1	json-server db.json --static ./some-other-dir

json-server 的路由配置
建立 routes.json 文件，如下
清单 18.                    Json-server 路有配置

1 2 3 4 5

{     "/api/": "/",     "/blog/:resource/:id/show": "/:resource/:id",     "/blog/:category": "/posts/:id?category=:category" }

启动 json-server 服务，并配置 --routes 选项

1	json-server db.json --routes routes.json

访问相应的 url，来测试自定义的路由配置

1 2 3 4

/api/posts # → /posts /api/posts/1 # → /posts/1 /blog/posts/1/show # → /posts/1 /blog/javascript # → /posts?category=javascript

关于 json-server 的 API 调用，和其他的用法可以参考

1	<a href="https://github.com/typicode/json-server"><code>https://github.com/typicode/json-server&lt;/code></a>

Source map                文件与调试如今的 web                应用变得越来越复杂，也更加强调和关注客户端技术的实现能力。由于很多的功能需要客户端来予以实现，这不仅增加了实现文件的复杂度，也导致文件本身如                css, javascript 变得越来越大。在将 web                应用投入实际的运行环境之前，往往我们需要对这些文件文件进行压缩，合并与混淆的工作，来提高页面的加载速度。
但是，这样的转换却增加了调试工作的难度，source map 的出现就是用来解决这样的问题。Source map                是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
生成 source map 文件
webpack 通过 devtool 参数控制 source map 的生成，并支持多种 source map 配置（参看  ）
清单 19. 生成                source map 文件例如

1 2 3 4

{ devtool: "#inline-source-map" } // => //# sourceMappingURL=..

另外一种生成 source map 文件的方法是使用 Google 的 Closure 编译器，其命令格式如下：

1 2 3 4 5

java -jar compiler.jar \ --js script.js \ --create_source_map ./script-min.js.map \ --source_map_format=V3 \ --js_output_file script-min.js

使用 source map 调试 javascript 文件
Chrome 浏览器需要在 Developer Tools 的 Setting 设置中，确认选中"Enable source maps"。
图 6.                    使用 source map 调试 javascriptFirefox23+ 浏览器的 developer tools，在默认情况下也是支持 source map 文件
图 7. 使用                    source map 调试 javascript