在开发前端页面时，往往需要和后端的服务器打交道，而现在前端代码和后端通常是分开来由不同的人来开发的，并且后端往往也不是Node.js实现的。那么这些和后端接触的部分前端代码就显得非常难受。作为初学者，我们可能会去在代码里面hard code一些数据来mock这些请求，但显然这样做比较蠢，会留下一些没有必要的代码。另外一个思路就是直接去mock后端的服务器，而不仅仅是某个请求。本文就将探讨这个思路下的可与后端无缝衔接的React开发环境的搭建。

从create-react-app入手###

首先，以下主要讲的是开发React的应用，如果是用其他框架的话，思路也可以借鉴。

这里默认React应用是通过create-react-app来创建的，使用这个工具的好处在于它帮我们集成了许多我们需要的lib，功能还是比较齐全的，使用时建议看一看官方的guide。

create-react-app本身集成了一个HTTP server（假设就叫dev server），用于host我的所有静态文件，并且我代码中的修改保存后是可以实时反映到页面上的（即支持热加载），这大大提高了开发的效率。因为这里需要去模拟整个后端服务器，所以我们会另启一个HTTP server作为mock的服务器（假设叫API server）。为了避开跨域请求的问题，这里将dev server设置成API server的代理服务器。当我在我前端的代码中发送请求时，通过代理就可以得到API server中的数据，并且请求的域名仍然是host我的js代码的dev server。整个流程如下图所示：

proxy using create-react-app

create-react-app设置代理非常简单，只需要在package.json中添加如下的设置即可以让所有在dev server上无法找到的资源导向API server：

"proxy": "http://localhost:3001"

模拟后端环境###

以下JavaScript库会被用到：

  • json-server：用于模拟后端的各种请求；
  • concurrently：用于并发地启动我们前端的web server和后端的server；

json-server的使用非常简单，只需要新建一个json文件作为它的输入即可，这里我们在./tests/目录下创建了一个db.json文件，这个文件的内容要根据需要模拟的后端的请求路径和内容来做相应的设置。

最后，只需要在开发时同时开启dev server以及API server即可。这里重新设置package.json中的start命令，当执行npm start时便会同时启动一个前端开发的服务器以及一个模拟后端的服务器。

最终整个package.json文件大概长这样：

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "concurrently": "^3.4.0",
    "json-server": "^0.9.6",
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "concurrently 'react-scripts start' 'json-server --watch ./tests/db.json -p 3001'",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Reference###