在生产中禁用 displayName

【问题标题】：Disable displayName in production在生产中禁用 displayName
【发布时间】：2019-08-28 00:54:34
【问题描述】：

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

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

而不仅仅是

<button class="asdf123" />

对开发很有帮助。不过我想知道，如何在生产环境中禁用添加到类的组件名称，因为它是多余的？

【问题讨论】：

【解决方案1】：

根据styled components doc，应该可以通过babel插件的选项来控制

基本上，您用于生产构建的 webpack 配置应该如下所示

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

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

如果您使用的是样式化组件宏，您应该能够通过将此配置放入文件indicated here 之一来执行此操作而无需弹出

【讨论】：