当前位置：首页 > React

react打包如何保留源码

2026-02-12 10:44:37React

保留 React 源码的打包方法

在 React 项目中，默认的打包工具（如 Webpack 或 Vite）会压缩和混淆代码。以下是保留源码的几种方法：

配置 Webpack 的 devtool 选项

在 webpack.config.js 中，通过设置 devtool 选项为 'source-map' 或 'hidden-source-map' 可以生成源码映射文件（source map）。这种方式不会直接保留源码，但可以通过映射文件调试原始代码。

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

禁用代码压缩

在 Webpack 配置中禁用 TerserPlugin 或其他压缩插件，避免代码被混淆或压缩。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: false,
  },
  // 其他配置...
};

使用 Vite 保留源码

在 Vite 项目中，可以通过配置 build.sourcemap 选项生成完整的源码映射文件。

// vite.config.js
export default {
  build: {
    sourcemap: true,
  },
};

直接保留源码文件

将源码文件手动复制到打包输出目录。可以通过脚本或工具（如 copy-webpack-plugin）实现。

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src', to: 'src' },
      ],
    }),
  ],
};

使用环境变量控制

通过环境变量区分开发和生产环境，动态决定是否保留源码。

react打包如何保留源码

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';

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