react打包如何保留源码

保留 React 源码的打包方法

在 React 项目中，默认的打包工具（如 Webpack 或 Vite）会压缩和混淆代码，导致源码不可读。若需保留源码，可采用以下方法：

配置 Webpack 的 devtool 选项

在 webpack.config.js 中设置 devtool 为 'source-map' 或 'eval-source-map'，生成独立的 .map 文件映射源码：

module.exports = {
  devtool: 'source-map',
  // 其他配置...
};

禁用代码压缩

在 Webpack 配置中关闭 TerserPlugin 的压缩功能：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: false,
    minimizer: [new TerserPlugin({
      terserOptions: { compress: false, mangle: false }
    })],
  },
};

使用 Vite 保留源码

在 vite.config.js 中设置 build.sourcemap 为 true，并禁用压缩：

export default defineConfig({
  build: {
    sourcemap: true,
    minify: false,
  },
});

直接保留原始文件

将 src 目录复制到打包输出文件夹（如 build）中，通过脚本或工具（如 copy-webpack-plugin）实现：

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

注意事项

• 保留源码可能增加打包体积，需权衡调试需求与性能。
• 生产环境不建议保留未压缩代码，可通过 NODE_ENV 区分配置。
• 若使用 Create React App，需通过 eject 或 react-app-rewired 修改配置。