Question

我需要将来自Create React App的请求代理到单独的API服务器，并动态或使用环境变量设置该服务器。我遵循了configuring proxy manually，但是我正在使用TypeScript。即使更新到最新版本（v3.1.0），react-scripts-ts似乎也没有加载src/setupProxy.js。我使用香草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'),。导出，最后一个（第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 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文件。希望这会有所帮助。

Answer 2

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

我的错误是超级愚蠢。 setupProxy在src/文件夹之外。因此，请确保您在文件夹setupProxy内创建src

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",

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

2 个答案: