React代码压缩时如何保留JSX注释？

你遇到的问题其实是因为JSX注释和普通JavaScript注释的处理逻辑不一样——Babel的comments: true选项只负责保留标准JS注释（比如//或/* ... */写在JS代码里的），但JSX里的{/* ... */}属于JSX语法的一部分，默认会被Babel的JSX转换插件移除，哪怕你开了注释保留。

下面是具体的解决步骤：

1. 调整Babel配置，保留JSX注释 #

修改你的babel-loader配置，显式给@babel/plugin-transform-react-jsx插件添加preserveComments: true参数，强制它保留JSX注释：

{
    test: /\.(js|jsx|mjs)$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            babelrc: false,
            presets: [ require.resolve( 'babel-preset-cgb' ) ],
            cacheDirectory: false,
            comments: true, // 保留标准JS注释
            plugins: [
                // 显式配置JSX插件，保留JSX注释
                [ '@babel/plugin-transform-react-jsx', { preserveComments: true } ]
            ]
        },
    },
}

2. 确认UglifyJsPlugin的配置正确 #

你当前的Uglify配置已经设置了comments: true和extractComments: false，这部分是对的——只要Babel把注释保留到编译后的JS代码里，Uglify就不会剥离它们。

为什么之前的配置没用？ #

简单来说：

• Babel的comments: true不处理JSX注释，只处理普通JS注释
• 默认情况下，Babel转换JSX时会自动丢弃{/* ... */}这类注释，必须通过preserveComments参数手动开启保留

修改完配置后重新编译，你应该就能在生产压缩代码里看到你的JSX注释了。

内容的提问来源于stack exchange，提问作者CyberJunkie