create-react-app添加mocker和代理功能

描述

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

1
2
3
npx create-react-app my-app
cd my-app
npm install

弹出配置

1
npm run eject

添加 mocker 功能

mocker-api 的 npm 地址

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

1
mocker './mocker.js'

当然也可以在webpack中进行配置,通过webapck进行调用。
webpackdevserverbefore函数中进行配置。

1
npm install mocker-api --save-dev

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

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');
const apiMocker = require('mocker-api');

...

before(app,server){

...

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

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

设置 proxy

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 官网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,需要设置devServerproxy属性,但是create-react-app对 proxy 进行了封装,它读取的是 package.json 文件中 proxy 的配置,可查看scripts/start.js中对 proxy 设置的相关代码:

scripts/start.js

1
2
3
4
5
6
// 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 如下设置:

1
2
3
"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,

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

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

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

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

如何测试呢?

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

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

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

2019 年 05 月 24 日

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/09/create-react-app%E6%B7%BB%E5%8A%A0mocker%E5%92%8C%E4%BB%A3%E7%90%86%E5%8A%9F%E8%83%BD/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏