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

Question

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

Answer 1

经过代码潜水后，打字稿 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，最后一个（第三个）是proxySetup: resolveOwn('template/src/setupProxy.js'),

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

const fs = require('fs');在第 15 行下方添加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 来更新所有必要的包：

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

并更新setupProxy.js每个包中的文件。希望这可以帮助。