在生产中禁用displayName

Question

我在CRA 2.0应用程序中使用styled-components 4.0。默认情况下，组件名称会像这样显示在DOM中

<button class="Button-asdf123 asdf123" />

而不仅仅是

<button class="asdf123" />

它在开发中非常有用。我想知道，如何在生产环境中禁用添加的组件名称，因为它是多余的？

Answer 1

根据styled components doc，您应该能够通过babel插件的选项来控制它

https://github.com/styled-components/babel-plugin-styled-components

基本上，生产版本的webpack配置应该如下所示

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

由于你使用的是CRA，你可能无法访问你的webpack配置，除非你弹出（如果我没记错的话）

如果您正在使用样式化组件宏，则应该能够在不弹出的情况下执行此操作，方法是将此配置放在其中一个文件中indicated here