styled-components Babel插件

該插件增加了對(duì)服務(wù)器端渲染，樣式最小化和更好的調(diào)試體驗(yàn)的支持。

用法

首先安裝 babel-plugin：

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

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

注意

??插件調(diào)用訂單在您的. 巴克爾克文件事項(xiàng)。如果您在 babel 配置中使用 env 屬性，則將此插件放入插件數(shù)組是不夠的。相反，它需要放入每個(gè) env 的插件數(shù)組中，以保持它首先被執(zhí)行。有關(guān)詳細(xì)信息，請(qǐng)參閱此。

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

服務(wù)器端渲染

通過(guò)向每個(gè)樣式的組件添加唯一標(biāo)識(shí)符，此插件避免了由于客戶(hù)端和服務(wù)器上的分類(lèi)生成不同而導(dǎo)致的校驗(yàn)和不匹配。如果您不使用此插件，并嘗試服務(wù)器端渲染樣式組件 React 將在補(bǔ)液期間使用 HTML 屬性不匹配警告進(jìn)行投訴。

如有必要，您可以使用Ssr選項(xiàng)：

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

更好的調(diào)試

此選項(xiàng)可增強(qiáng)每個(gè)組件上附加的 CSS 類(lèi)名稱(chēng)，并具有更豐富的輸出，以幫助識(shí)別 DOM 中的組件，而無(wú)需響應(yīng) DevTools。在頁(yè)面源中，你會(huì)看到：<按鈕類(lèi)\"按鈕-asdf123 asdf123" />而不是只是<按鈕類(lèi)="asdf123" />.

它還允許您查看組件的顯示名稱(chēng)在反應(yīng)開(kāi)發(fā)工具中。例如，請(qǐng)考慮編寫(xiě)一個(gè)樣式的組件，該組件呈現(xiàn)按鈕元素，稱(chēng)為我的按鈕.它通常會(huì)以 DevTools 顯示為樣式. 按鈕，但與顯示名稱(chēng)選項(xiàng)啟用，它有您給它的名稱(chēng)：我的按鈕.

這樣可以更輕松地查找組件并找出組件在應(yīng)用中的住點(diǎn)。

如果您不需要此功能，可以使用顯示名稱(chēng)選項(xiàng)：

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

控制組件顯示名稱(chēng)

默認(rèn)情況下，顯示名稱(chēng)組件將用文件名前綴，以使組件名稱(chēng)盡可能唯一。

您可以強(qiáng)制組件顯示名稱(chēng)通過(guò)禁用文件名選項(xiàng)：

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

一個(gè)例子，你可能要做到這一點(diǎn)，是測(cè)試與酶的成分。雖然您始終可以使用.find（組件名稱(chēng)）它絕對(duì)有可能搜索組件的顯示名稱(chēng)與.find（"組件名稱(chēng)"）.在后一種情況下，您需要禁用文件名選項(xiàng)。如果確實(shí)希望僅用于測(cè)試，請(qǐng)確保僅在測(cè)試環(huán)境下添加此項(xiàng)。

縮小

此插件可執(zhí)行兩種類(lèi)型的分化：一種從 CSS 中刪除所有空白和注釋?zhuān)硪环N刪除標(biāo)記模板文本的所有空白和注釋，將寶貴的字節(jié)從捆綁包中保留。

如果需要，您可以通過(guò) babel 配置禁用此行為：

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

死碼消除

由于樣式的組件的轉(zhuǎn)換和構(gòu)造方式，默認(rèn)情況下，明號(hào)器無(wú)法對(duì)它們正確執(zhí)行死代碼消除，因?yàn)樗鼈兗俣ㄓ懈弊饔?。但是，有一個(gè)功能，可以啟用，以幫助此過(guò)程稱(chēng)為"純注釋"。

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

它利用一個(gè) babel 幫助器標(biāo)記每個(gè)樣式的組件和庫(kù)幫助器與#__PURE__JS評(píng)論說(shuō)，一些明化器用于克服上述問(wèn)題。

模板字符串轉(zhuǎn)換

這個(gè)插件轉(zhuǎn)換樣式組件標(biāo)記模板文本到比 Babel 通常創(chuàng)建較小的表示形式。

等等， 轉(zhuǎn)皮標(biāo)記模板文本？巴貝爾不是土生土長(zhǎng)的嗎？????使用 Babel 時(shí)，您很可能將 ES2015+ JavaScript 轉(zhuǎn)用于符合 ES5 的代碼，以用于較舊的瀏覽器支持。最受歡迎的基本巴別爾預(yù)設(shè) （es2015 / Env / 最新） 包括babel - plugin - 轉(zhuǎn)換 - es2015 - 模板 - 文字轉(zhuǎn)換，使標(biāo)記的模板文本在較舊的瀏覽器中工作，但有一個(gè)警告：該轉(zhuǎn)換的輸出是相當(dāng)冗長(zhǎng)的。這樣做是為了滿(mǎn)足規(guī)范要求。

下面是一個(gè)處理的轉(zhuǎn)皮代碼的示例。巴貝爾預(yù)設(shè)最新:

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)

樣式組件不需要完全的規(guī)格兼容性。我們的 Babel 插件將跨堆模板文本附加到樣式化組件的略有不同， 較小的形式， 仍然工作在舊的瀏覽器， 但有一個(gè)更小的占用空間.

下面是前面的例子與樣式組件 babel 插件和[跨金屬板精簡(jiǎn)： true]選項(xiàng)：

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

該插件也足夠智能，不會(huì)修改屬于其他庫(kù)和用例的標(biāo)記模板文本：

// 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`};
`

您可以使用透堆板精簡(jiǎn)版選項(xiàng)：

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