在create-react-app中安装babel-plugin-styled-components

Question

我试图在一个create-react-app应用程序中使用styled-components-babel-plugin，以便在我的chrome dev工具中将组件名称作为类名。但是，不知何故，我无法更改类名。我按照网站上的描述安装了Babel和插件，并像这样创建了我的.babelrc：

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

我尝试了很多组合的预设（包括 react-app）和其他babel配置，也尝试在package.json中进行设置，但我无法使其正常工作。问题是我从未使用过babel，几乎不知道为什么需要它。所以我不知道是我在babel还是styled-components方面出错了。是否有任何示例项目可使用带有工作的styled-components babel插件？

- modmoto

---

我没有webpack配置。我试图让它运行，但是由于我不知道我在做什么，所以我也被卡住了。我安装了一些东西，得到了一些错误消息，现在我有了一个webpack配置，但是webpack运行的结果是一个语法错误，它无法识别jsx语法。所有这些花哨的东西真的有必要吗？毕竟，我使用create-react-app来启动项目。在幕后难道没有使用webpack，我可以更新吗？ - modmoto

嗨。我刚刚检查了一下，内部create-react-app使用了webpack，似乎这里有一个关于如何使用自定义babelrc的讨论。希望能帮到你。如果不行，我认为最好的方法是从头开始设置你的配置，这样它就会完全透明..但是可能需要一些时间，因为webpack在一开始就是个野兽 :-) - Daniel Khoroshko

是的，你说得对，npm run eject会将应用程序转换为一个适当的应用程序。在寻找.bablerc时，我注意到他们将babel设置保存在package.json中，所以我想你可能需要将它们转移到一个适当的babelrc文件中或继续保持在package.json中进行维护。祝你好运！ - Daniel Khoroshko

是的，我也尝试在package.json中安装插件，但可能我做错了什么，因为那样也没有起作用。稍后我会再次检查。 - modmoto

我的意思是除了安装插件以外，.babelrc 的实际内容并不在 .babelrc 文件中，而是在 package.json 文件中，就像文档中所述 https://babeljs.io/docs/usage/babelrc/。 - Daniel Khoroshko

Answer 1

有一种更简单的方法可以实现这一点，而且不需要弹出或安装任何其他软件包：

不要像这样导入styled-components:

import styled from 'styled-components';

像这样导入：

import styled from 'styled-components/macro';

如果这种情况对你没有作用，很可能需要更新styled-components或react。更多信息可以在styled-components文档中找到。

- Alex Mckay

---

这是支持Alex答案的实际部分链接： https://www.styled-components.com/docs/tooling#babel-macro - Null isTrue

哥们，你的回答真的帮了我很多！我花了好几个小时试图让那个插件工作，但一直没有成功，而有了你的回答，我可以非常轻松地使用它的功能。非常感谢你！ - Fabio Sousa

Answer 2

Create react app v2支持Babel宏。有一个NPM软件包用于styled-components宏。只需将软件包添加到create react app中，你就完成了。

yarn add styled-components.macro --dev

这样做不需要弹出CRA。

- vijayst

---

当时我不知道，但还是谢谢你提醒我！ - modmoto

Alex Mckay的回答帮助了我：还要从styled-components/macro导入。 - Chris

Answer 3

在得到Daniel的一些提示后，我尝试以另一种方式安装babel插件。结果发现，如果不弹出create-react-app (https://github.com/facebookincubator/create-react-app/issues/2611) 并手动安装插件，是无法添加babel插件的。为此，我运行了以下命令：

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

之后，我得到了一堆新文件，我的package.json变得更大了，但也包括了一个babel的部分，像这样：

  "babel": {
    "presets": [
      "react-app"
    ]
  }

现在只需添加babel-plugin即可使用。因此，对于styled-components插件，我的package.json中的babel部分现在如下所示:

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

现在插件可以使用了，我很高兴=）感谢Daniel指导我正确的方向！

- modmoto