styled-components Babel插件

该插件增加了对服务器端渲染，样式最小化和更好的调试体验的支持。

用法

首先安装 babel-plugin：

npm install --save-dev babel-plugin-styled-components

然后将其添加到您的 babel 配置中，如此：

注意

⚠️插件调用订单在您的. 巴克尔克文件事项。如果您在 babel 配置中使用 env 属性，则将此插件放入插件数组是不够的。相反，它需要放入每个 env 的插件数组中，以保持它首先被执行。有关详细信息，请参阅此。

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

服务器端渲染

通过向每个样式的组件添加唯一标识符，此插件避免了由于客户端和服务器上的分类生成不同而导致的校验和不匹配。如果您不使用此插件，并尝试服务器端渲染样式组件 React 将在补液期间使用 HTML 属性不匹配警告进行投诉。

如有必要，您可以使用Ssr选项：

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

更好的调试

此选项可增强每个组件上附加的 CSS 类名称，并具有更丰富的输出，以帮助识别 DOM 中的组件，而无需响应 DevTools。在页面源中，你会看到：<按钮类\"按钮-asdf123 asdf123" />而不是只是<按钮类="asdf123" />.

它还允许您查看组件的显示名称在反应开发工具中。例如，请考虑编写一个样式的组件，该组件呈现按钮元素，称为我的按钮.它通常会以 DevTools 显示为样式. 按钮，但与显示名称选项启用，它有您给它的名称：我的按钮.

这样可以更轻松地查找组件并找出组件在应用中的住点。

如果您不需要此功能，可以使用显示名称选项：

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

控制组件显示名称

默认情况下，显示名称组件将用文件名前缀，以使组件名称尽可能唯一。

您可以强制组件显示名称通过禁用文件名选项：

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

一个例子，你可能要做到这一点，是测试与酶的成分。虽然您始终可以使用.find（组件名称）它绝对有可能搜索组件的显示名称与.find（"组件名称"）.在后一种情况下，您需要禁用文件名选项。如果确实希望仅用于测试，请确保仅在测试环境下添加此项。

缩小

此插件可执行两种类型的分化：一种从 CSS 中删除所有空白和注释，另一种删除标记模板文本的所有空白和注释，将宝贵的字节从捆绑包中保留。

如果需要，您可以通过 babel 配置禁用此行为：

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

死码消除

由于样式的组件的转换和构造方式，默认情况下，明号器无法对它们正确执行死代码消除，因为它们假定有副作用。但是，有一个功能，可以启用，以帮助此过程称为"纯注释"。

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "pure": true
    }]
  ]
}

它利用一个 babel 帮助器标记每个样式的组件和库帮助器与#__PURE__JS评论说，一些明化器用于克服上述问题。

模板字符串转换

这个插件转换样式组件标记模板文本到比 Babel 通常创建较小的表示形式。

等等， 转皮标记模板文本？巴贝尔不是土生土长的吗？????使用 Babel 时，您很可能将 ES2015+ JavaScript 转用于符合 ES5 的代码，以用于较旧的浏览器支持。最受欢迎的基本巴别尔预设 （es2015 / Env / 最新） 包括babel - plugin - 转换 - es2015 - 模板 - 文字转换，使标记的模板文本在较旧的浏览器中工作，但有一个警告：该转换的输出是相当冗长的。这样做是为了满足规范要求。

下面是一个处理的转皮代码的示例。巴贝尔预设最新:

var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;'])
function _taggedTemplateLiteral(strings, raw) {
  return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }))
}
var Simple = _styledComponents2.default.div(_templateObject)

样式组件不需要完全的规格兼容性。我们的 Babel 插件将跨堆模板文本附加到样式化组件的略有不同， 较小的形式， 仍然工作在旧的浏览器， 但有一个更小的占用空间.

下面是前面的例子与样式组件 babel 插件和[跨金属板精简： true]选项：

var Simple = _styledComponents2.default.div(['width: 100%;'])

该插件也足够智能，不会修改属于其他库和用例的标记模板文本：

// Following will be converted:
styled.div``
keyframe``
css```some text` // But this will not be converted:
// Here the outer template literal will be converted
// because it's attached to the component factory,
// but the inner template literals will not be touched:
styled.div`
  color: ${light ? `white` : `black`};
`

您可以使用透堆板精简版选项：

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