react打包如何不删除源码

配置自定义构建输出目录

在项目根目录下创建或修改 craco.config.js（使用CRACO）或 config-overrides.js（使用react-app-rewired），通过覆盖Webpack配置保留源码。以下示例使用CRACO：

const path = require('path');
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.path = path.resolve(__dirname, 'build_with_source');
      return webpackConfig;
    }
  }
};

修改package.json构建脚本

调整构建命令以使用自定义配置工具。对于CRACO用户：

"scripts": {
  "build": "craco build",
  "build:with-source": "react-scripts build && cp -r src build/src"
}

手动复制源码到构建目录

在构建完成后执行文件复制操作。Linux/macOS系统可使用shell命令：

react-scripts build && cp -r src build/src

Windows系统可使用PowerShell命令：

react-scripts build && xcopy /E /I src build\src

使用环境变量控制源码保留

创建 .env 文件添加配置：

GENERATE_SOURCEMAP=true
INLINE_RUNTIME_CHUNK=false

配置Webpack的SourceMap选项

通过自定义配置启用详细source map：

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      devtool: 'source-map'
    }
  }
};

使用文件系统插件自动备份

安装copy-webpack-plugin并配置：

const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
  webpack: {
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: "src", to: "src_backup" }
        ],
      }),
    ],
  }
};

创建构建后脚本

添加Node.js脚本postbuild.js：

const fs = require('fs-extra');
fs.copySync('./src', './build/src');

在package.json中添加：

"scripts": {
  "postbuild": "node postbuild.js"
}

以上方法可根据实际需求组合使用，注意生产环境保留源码可能带来安全风险，建议仅用于开发或测试环境。