reactjs - 使用 Typescript 创建 React App 中的自定义代理

Question

我需要将来自 Create React App 的请求代理到单独的 API 服务器，并动态或使用环境变量设置该服务器。我关注了configuring proxy manually ，但是我使用的是 TypeScript。即使更新到最新版本 (v3.1.0)，react-scripts-ts 似乎也不会加载 src/setupProxy.js。我让它与 vanilla javascript 一起工作，但无法让它与 TypeScript 一起工作。有没有人获得 setupProxy 来使用 React TypeScript？

Answer 1

代码潜水后，出现typescript create-react-app尚未合并自定义代理功能。我必须更新两个文件:

https://github.com/samuelstevens9/create-react-app/blob/next/packages/react-scripts/config/paths.js

添加 proxySetup: resolveApp('src/setupProxy.js'), 到每个 module.exports，最后一个(第 3 个)是 proxySetup: resolveOwn('template/src/setupProxy. js'),

https://github.com/samuelstevens9/create-react-app/blob/next/packages/react-scripts/config/webpackDevServer.config.js

在第 15 行 const paths = require('./paths'); 下添加了 const fs = require('fs'); 并添加了

if (fs.existsSync(paths.proxySetup)) {
    // This registers user provided middleware for proxy reasons
    require(paths.proxySetup)(app);
}

在文件末尾的 before(app) { ... } 函数中。

我正在努力创建对主仓库的拉取请求，但看起来 v3.1.0 文件与 next 分支上的最新文件不同。现在我使用我制作的补丁脚本，因为我们使用的是 lerna monorepo 来更新所有必要的包:

#!/bin/bash
CONFIG_PATHS_URL="https://raw.githubusercontent.com/samuelstevens9/create-react-app/next/packages/react-scripts/config/paths.js"
CONFIG_WEBPACKDEVSERVER_URL="https://raw.githubusercontent.com/samuelstevens9/create-react-app/next/packages/react-scripts/config/webpackDevServer.config.js"
SETUPPROXY_URL="https://gist.githubusercontent.com/samuelstevens9/5872e72ac915dfc1a8ae2fdcef323899/raw/7f2c76d42bc0915026379dfc7884cb1bd97f56bb/setupProxy.js"

for f in packages/*; do
    if [ -d ${f} ]; then
        echo $f
        # Will not run if no directories are available
        NODE_MODULES_CONFIG_DIR=$f/node_modules/react-scripts-ts/config
        if [ -d "$NODE_MODULES_CONFIG_DIR" ]; then
          # Control will enter here if $DIRECTORY exists.
          echo $NODE_MODULES_CONFIG_DIR
          curl -o $NODE_MODULES_CONFIG_DIR/paths.js $CONFIG_PATHS_URL
          curl -o $NODE_MODULES_CONFIG_DIR/webpackDevServer.config.js $CONFIG_WEBPACKDEVSERVER_URL
          curl -o $f/src/setupProxy.js $SETUPPROXY_URL
        fi
    fi
done

同时更新每个包中的 setupProxy.js 文件。希望这会有所帮助。