描述

本文讲解如何给使用 create-react-app 创建的项目添加 mocker 的功能，和设置添加 proxy 同服务端进行联调。 ###创建项目
使用官网方式创建项目。

npx create-react-app my-app
cd my-app
npm install

弹出配置

npm run eject

添加 mocker 功能

mocker-api 的 npm 地址

mocker-api是用来启动一个 mocker 服务的插件，使用 mocker-api 可以通过多种方式启动一个 mocker 服务，比如可以像serve插件一样，直接把指定文件启动成一个 mocker 服务,如下：

mocker './mocker.js'

当然也可以在webpack中进行配置，通过webapck进行调用。
在webpack的devserver的before函数中进行配置。

npm install mocker-api --save-dev

打开config/webpackDevServer.config.js文件
按照官网上的添加就行，关键代码如下：

const path = require('path');
const apiMocker = require('mocker-api');

...

before(app,server){

...

apiMocker(app, path.resolve("./mocker/index.js"));
}

第二个参数一定要定位到一个文件，不能指定一个文件夹。

设置 proxy

上面的 code 省去了mocker-api的proxy的配置，经过测试，在mocker-api中设置 proxy 没有作用。下面是官网的 demo

// 官网code
+ devServer: {
+   ...
+   before(app){
+     apiMocker(app, path.resolve('./mocker/index.js'), {
+       proxy: {
+         '/repos/*': 'https://api.github.com/',
+         '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018'
+       },
+       changeHost: true,
+     })
+   }
+ },

如果需要开启 proxy，需要设置devServer的proxy属性，但是create-react-app对 proxy 进行了封装，它读取的是 package.json 文件中 proxy 的配置，可查看scripts/start.js中对 proxy 设置的相关代码：

scripts/start.js

// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig);
const devServer = new WebpackDevServer(compiler, serverConfig);

paths.appPackageJson就是package.json文件，然后读取proxy属性。

proxy 的值

在 package.json 如下设置：

"proxy": "http://target_ip:port/"
例如：
"proxy": "http://www.baidu.com/"

和服务端联调

其实 devServer 的 proxy 和 mocker-api 是没关系的，无论 mocker-api 是否存在，只要 devServer 设置了 proxy，就能直接和服务端联调了。

设置了 mocker-api 的情况下如何与服务端联调呢？

看官方的 demo，mocker 中根据环境变量 NO_PROXY 是“启动”mocker，

const noProxy = process.env.NO_PROXY === "true";
...
module.exports = noProxy ? {} : delay(proxy, 1000);

因此可以通过设置 NO_PROXY“禁用 mocker”，而通过 proxy 和服务端进行联调。如何做呢，很简单，增加一个 npm scripts 命令，看代码：

"start:no-mock": "NO_PROXY=true node scripts/start.js",

是的，仔细的同学应该看到了，就是复制了一份start的命令，只是增加了上了环境变量的设置。

如何测试呢？

我就是使用 mocker 另外启了一个服务，通过 mocker-api 把项目中编写好的 mocker 文件启动了起来。
mocker ./mocker/index.js
这个服务的端口和 react 项目的端口肯定不一样，可以进行测试。

上面的“启动”和“禁用”为什么要加引号呢？

因为只要在devServer的before函数中配置了mocker-api，其实mocker服务就启用了，只不过如果mocker文件返回一个空对象，那请求在mocker服务中肯定匹配不到合适的url，然后就走proxy进行请求，而不是mocker服务没启动。

2019 年 05 月 24 日