如何在React应用程序中渲染表情符号(使用Webpack)? [英] How can I render emoji in my React app (using Webpack)?

问题描述

我尝试以几种不同的方式(即✨，{'\ u2728'}和一些组件库)在React组件中使用表情符号.每种方法都可以与我的代码的 dev 构建一起使用，而无法与我的相同代码的 prod 构建一起构建.

I've tried using emojis in my React components in a few different ways (i.e. ✨, {'\u2728'}, and a few component libraries). Every way works with my dev build of the code and fails with my prod build of the same code.

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

The prod build outputs the Unicode value of the emoji despite the method I use in the code, so I think it has something to do with my Webpack config, but I cannot find any solution on the web.

Dev输出

产品输出

推荐答案

在确保我有所有详细信息要问我的问题的同时，我对以前从未查询过的内容做了一些挖掘，找到了答案.

While making sure I had all the details to ask my question, I did some digging on something I hadn't looked up before and found my answer.

我的搜索使我想到了这个GitHub问题(链接)有人使用create-react-app遇到此问题的地方.最终，该问题是UglifyJS的潜在问题，该问题要求在该步骤中传递 ascii_only 参数.

My searching led me to this GitHub issue (link) where someone was having this issue using create-react-app. Ultimately, the issue was an underlying issue with UglifyJS which required an ascii_only argument to be passed in that step.

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

I checked out the current version of create-react-app's Webpack config and added the relevant bits to my project and it fixed my solution. Here's the source I used (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,
            },
          },
        }),
      ],
    },

这篇关于如何在React应用程序中渲染表情符号(使用Webpack)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！