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变换#7153之后保留jsx注释

该问题已于去年修复，而修复已进入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 */
  );
}

因此，只有在同一块中没有其他标记的情况下，注释才会被删除。

由于较旧的错误已永久关闭，因此我添加了一个新的＃10118，因此无论谁找到此主题以寻找解决方案，都可以更好地查看此票证以进行更新

缩小我的React代码时如何保留注释？

1 个答案: