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

IT技术 reactjs webpack
2021-05-02 04:29:11

我在 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 module规则：

{
    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,
        },
    },
},
1个回答

我潜入 Babel 的 repo 并发现报告的错误

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

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

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

正如我们在在线沙箱中看到的，您的代码被转换为

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 */
  );
}

因此，仅当同一块中没有其他标记时才会删除注释。

因为旧的 bug 已经永远关闭了，我放了一个新的 #10118，所以无论谁找到这个主题寻找解决方案，最好检查这张票以获取更新

其它你可能感兴趣的问题
上一篇React - ComponentDidMount 没有从 Redux 状态中获取value 下一篇使用 react-vis 在 x 轴中以（MM-DD）格式显示日期