reactjs - 缩小 React 代码时如何保留注释？

Question

我在 React 应用程序中有以下 JSX:

render() {
  return (
    <div>
      {/* A JSX comment */}
    </div>
  )
}

我正在使用 webpack 来编译和缩小代码。

在我的 webpack 插件中，我使用 UglifyJsPlugin 来尝试保留评论:

new webpack.optimize.UglifyJsPlugin( {
    compress: {
        warnings: false,
        // Disabled because of an issue with Uglify breaking seemingly valid code:
        // https://github.com/facebookincubator/create-react-app/issues/2376
        // Pending further investigation:
        // https://github.com/mishoo/UglifyJS2/issues/2011
        comparisons: false,
    },
    mangle: {
        safari10: true,
        except: ['__', '_n', '_x', '_nx' ],
    },
    output: {
        comments: true,
        // Turned on because emoji and regex is not minified properly using default
        // https://github.com/facebookincubator/create-react-app/issues/2488
        ascii_only: true,
    },
    extractComments: false,
    sourceMap: shouldUseSourceMap,
} ),

comments:true 保留了 React 中的一些注释，但我来自 JSX /* A JSX comment */ 的注释已从缩小的代码中删除。如何防止该注释从缩小/生产代码中删除？

我的 Babel 模块规则也打开了注释:

{
    test: /\.(js|jsx|mjs)$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            // @remove-on-eject-begin
            babelrc: false,
            presets: [ require.resolve( 'babel-preset-cgb' ) ],
            // @remove-on-eject-end
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: false,
            comments: true,
        },
    },
},

Answer 1

我深入研究了 Babel 的存储库并发现了一个报告的错误

如何在babel转换后保留jsx注释#7153

它已于去年修复，修复进入 7.0.0-beta.37 。因此，如果该功能对您来说真的很重要，您就必须升级 Babel 的版本。

[UPD]我相信这只是上述错误的一个边缘情况。

正如我们在 online sandbox 中看到的那样您的代码被转换为

render() {
  return React.createElement("div", null);
}

但是一旦我至少放置了明确的null:

render() {
  return (
    <div>
      {null/* A JSX comment */}
    </div>
  )
}

它不会删除评论:

render() {
  return React.createElement("div", null, null
  /* A JSX comment */
  );
}

因此，仅当同一 block 中没有其他 token 时，注释才会被删除。

由于旧的错误已永远关闭，我已经添加了新的错误 #10118，因此无论谁发现此主题并寻找解决方案，最好检查此票证是否有更新