react打包如何保留源码

保留 React 源码的打包方法

在 React 项目中，默认的打包工具（如 Webpack 或 Vite）会通过压缩和混淆代码来优化生产环境构建。如果需要保留源码，可以通过以下方法实现：

禁用代码压缩和混淆

修改 Webpack 配置（通常在 webpack.config.js 或 webpack.prod.js 中）：

module.exports = {
  optimization: {
    minimize: false // 禁用代码压缩
  },
  devtool: 'source-map' // 生成完整的 Source Map
}

对于 Vite 项目，在 vite.config.js 中设置：

export default {
  build: {
    minify: false // 禁用压缩
  }
}

生成完整的 Source Map

Source Map 文件可以映射压缩后的代码回源码，便于调试。在 Webpack 中：

module.exports = {
  devtool: 'source-map' // 生成独立的 .map 文件
}

在 Vite 中默认会生成 Source Map，无需额外配置。

保留原始文件结构

某些打包工具会扁平化文件结构。如需保留原始结构，可在 Webpack 中配置：

module.exports = {
  output: {
    filename: '[name].js',
    pathinfo: true // 保留路径信息
  }
}

直接部署开发环境代码

极端情况下，可以直接部署未打包的开发环境代码：

• 保留所有 node_modules
• 使用原始 src 目录
• 通过 react-scripts start 运行

但这种方法会显著影响性能，仅建议用于特殊调试场景。

注意事项

• 保留源码会显著增加打包体积
• 生产环境暴露源码可能存在安全风险
• Source Map 文件可能仍然需要额外配置才能完全映射到原始代码