在生产中禁用 displayName

Posted 2023-03-16

【中文标题】在生产中禁用 displayName

【英文标题】：Disable displayName in production

【发布时间】：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插件的选项来控制

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

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

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

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

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