如何为React+TypeScript项目构建开发版静态文件？

算力阿峰

2026-7-29

解决方案

要在Create React App（CRA）中生成未压缩、保留源码结构的开发版静态构建文件，可以通过以下几种方式实现：

方法一：直接修改环境变量构建

CRA的build命令默认强制设置NODE_ENV=production，生成压缩后的生产版文件。我们可以手动指定NODE_ENV=development覆盖这个行为：

跨平台兼容方案（推荐）

先安装cross-env以兼容Windows/Mac/Linux环境：
```
npm install cross-env --save-dev
```

修改你的package.json中的scripts部分，添加build:dev命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "build:dev": "cross-env NODE_ENV=development react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

运行命令生成开发版静态文件：
```
npm run build:dev
```

分平台方案

Mac/Linux：直接在scripts中添加：

"build:dev": "NODE_ENV=development react-scripts build"

Windows：添加：

"build:dev": "set NODE_ENV=development && react-scripts build"

运行npm run build:dev后，build目录下的文件就是未压缩、保留原始代码结构的开发版产物，适合部署到你的Golang服务器进行调试。

方法二：自定义Webpack配置（进阶）

如果需要更精细的控制（比如调整Source Map类型、禁用特定插件），可以使用react-app-rewired无需eject即可修改CRA的Webpack配置：

安装依赖：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js文件：

const { override, setWebpackMode } = require('customize-cra');

module.exports = override(
  // 强制设置Webpack模式为development
  setWebpackMode('development')
);

修改package.json的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "build:dev": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}