react打包如何保留源码
保留 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' },
],
}),
],
};使用环境变量控制
通过环境变量区分开发和生产环境，动态决定是否保留源码。
// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
devtool: isProduction ? false : 'source-map',
// 其他配置...
};注意事项
- 源码映射文件会暴露原始代码结构，可能带来安全风险。
- 直接保留源码会增加打包体积，影响加载性能。
- 生产环境中建议仅保留必要的调试信息。
