如何向yarn/npm传递配置选项？React项目代理环境控制咨询

1. 如何向 yarn/npm 传递配置选项 #

传递配置选项分两种常见场景，我给你逐一说明：

给 yarn/npm 自身设置配置 #

如果你要修改 yarn 或 npm 的全局/临时配置（比如镜像源、缓存路径等）：

• 临时生效：在命令后直接加 --<配置项> 参数。比如换国内镜像源安装依赖：

  # npm 临时换源
  npm install --registry=https://registry.npmmirror.com
  # yarn 临时换源
  yarn install --registry=https://registry.npmmirror.com
  

• 永久生效：使用 config set 命令设置全局配置，后续所有命令都会沿用这个设置：

  # npm 永久设置镜像源
  npm config set registry https://registry.npmmirror.com
  # yarn 永久设置镜像源
  yarn config set registry https://registry.npmmirror.com
  

给 package.json 中的脚本传递参数 #

如果要给你在 scripts 里定义的自定义命令传参数：

• npm：需要在命令后加 -- 分隔符，再跟具体参数。比如你的脚本是 "build": "webpack"，要传生产模式参数：

  npm run build -- --mode production
  

• yarn：可以直接跟参数（部分场景也支持 -- 分隔，效果一致）：

  yarn build --mode production
  

2. 控制 React 代理的启用状态（开发启用/生产禁用） #

先给你吃个定心丸：Create React App 自带的 proxy 字段只会在开发环境（yarn start）生效，生产环境打包（yarn build）后是纯静态文件，根本不会用到这个代理配置——所以你原本的配置其实已经满足生产环境不启用代理的需求了。

但如果你需要在开发时也能灵活开关代理，或者想更严谨地控制，推荐用自定义代理配置+环境变量的方式，只用一个 package.json 就能实现：

步骤1：修改 package.json 的 scripts #

添加带环境变量的启动命令，用来标记是否启用代理：

{
  "scripts": {
    "start": "REACT_APP_PROXY_ENABLED=true react-scripts start",
    "start:no-proxy": "REACT_APP_PROXY_ENABLED=false react-scripts start",
    "build": "react-scripts build"
  }
}

步骤2：创建自定义代理配置文件 #

在项目根目录的 src 文件夹下新建 setupProxy.js 文件（Create React App 会自动识别并加载这个文件），根据环境变量判断是否启用代理：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 只有当环境变量标记为 true 时，才启用代理
  if (process.env.REACT_APP_PROXY_ENABLED === 'true') {
    app.use(
      '/api', // 替换成你的后端 API 前缀（比如所有 /api 开头的请求都转发）
      createProxyMiddleware({
        target: 'http://localhost:3001',
        changeOrigin: true,
      })
    );
  }
};

使用方式 #

• 启用代理开发：运行 yarn start
• 禁用代理开发：运行 yarn start:no-proxy
• 生产打包：运行 yarn build，此时 setupProxy.js 不会被执行，自然没有代理

这样既满足了开发环境按需启用代理，也保证了生产环境完全不需要代理的需求。

内容的提问来源于stack exchange，提问作者Fred OLeary