使用 Typescript 创建 React App 中的自定义代理答案

【问题标题】：Custom Proxy in Create React App using Typescript使用 Typescript 创建 React App 中的自定义代理
【发布时间】：2020-05-22 13:21:13
【问题描述】：

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

【问题讨论】：

常规 CRA supports TS now 如果您可以选择升级。
Upgrading from react-scripts-ts to Create React App v2.1

标签： reactjs typescript

【解决方案1】：

代码挖掘后，typescript create-react-app 似乎尚未包含自定义代理功能。我不得不更新两个文件：

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

在每个 module.exports 中添加了proxySetup: resolveApp('src/setupProxy.js'),，最后一个（第三个）是proxySetup: resolveOwn('template/src/setupProxy.js'),

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

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

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 文件。希望这会有所帮助。

【讨论】：

【解决方案2】：

现在 CRA 支持 Typescript，但我无法让 setupProxy.js 工作。

我的错误非常愚蠢。 setupProxy 在 src/ 文件夹之外。因此，请确保在文件夹 src 中创建 setupProxy

src/setupProxy.js

我的代码如下所示：

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.REACT_APP_API_URI,
      changeOrigin: true,
    })
  )
}

另外，请确保您的 env 配置正常工作。你需要安装包env-cmd并替换

"start": "react-scripts start",

为

"start": "env-cmd -f .env.development.local react-scripts start",

【讨论】：