如何在我的 React 应用程序中渲染表情符号（使用 Webpack）？答案

【问题标题】：How can I render emoji in my React app (using Webpack)?如何在我的 React 应用程序中渲染表情符号（使用 Webpack）？
【发布时间】：2020-07-30 16:25:26
【问题描述】：

我已经尝试以几种不同的方式在我的 React 组件中使用表情符号（即 ✨、{'\u2728'} 和一些组件库）。每种方式都适用于我的 dev 代码构建，而我的 prod 构建相同代码则失败。

尽管我在代码中使用了方法，但 prod 构建输出表情符号的 Unicode 值，所以我认为这与我的 Webpack 配置有关，但我在网络上找不到任何解决方案。

开发输出

产品输出

【问题讨论】：

标签： reactjs webpack emoji

【解决方案1】：

在确保我有所有细节可以问我的问题时，我做了一些我以前没有查过的东西并找到了答案。

我的搜索将我带到了这个 GitHub 问题 (link)，其中有人使用 create-react-app 遇到了这个问题。最终，这个问题是 UglifyJS 的一个潜在问题，需要在该步骤中传递一个 ascii_only 参数。

我检查了 create-react-app 的 Webpack 配置的当前版本，并将相关位添加到我的项目中，它修复了我的解决方案。这是我使用的来源 (link)。

所需的最低配置如下所示：

    optimization: {
      minimize: isEnvProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              // Turned on because emoji and regex is not minified properly using default
              // https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            },
          },
        }),
      ],
    },

【讨论】：