我们目前正在尝试将 `babel-plugin-styled-components` 集成到基于 `typescript` 和 `create-react-app` 的设置中,以获得更好的调试体验,但我们在进行时遇到了困难。
我们不想弹出应用程序,这就是为什么我们正在尝试使用 `react-app-rewired` 进行设置,并且我们还成功使用 `react-app-rewire-typescript` 和 `react-app-rewire-styled-components` 编译了我们的 typescript 代码。 然而,由于某种原因,没有应用 `displayName`,这让我认为 babel 插件没有被应用。 我们使用 `“start”:“react-app-rewired start”` 作为开发服务器脚本,并且 `config-overrides.js` 如下所示:
我们不想弹出应用程序,这就是为什么我们正在尝试使用 `react-app-rewired` 进行设置,并且我们还成功使用 `react-app-rewire-typescript` 和 `react-app-rewire-styled-components` 编译了我们的 typescript 代码。 然而,由于某种原因,没有应用 `displayName`,这让我认为 babel 插件没有被应用。 我们使用 `“start”:“react-app-rewired start”` 作为开发服务器脚本,并且 `config-overrides.js` 如下所示:
const rewireTypescript = require('react-app-rewire-typescript');
const rewireStyledComponents = require('react-app-rewire-styled-components');
module.exports = function override(config, env) {
return rewireTypescript(rewireStyledComponents(config, env), env);
}
我不知道我们错过了什么。交换 rewire...
函数的封装也没有帮助。
这里有没有任何人有相关经验或者可以指点我正确的方向?
babel-plugin-styled-components-typescript
的单独版本的Babel插件,似乎与TypeScript兼容。不幸的是,我目前正在一个没有TypeScript的不同项目上,无法验证这个解决方案。你需要自己尝试一下。在这里找到相关讨论: https://spectrum.chat/thread/1cb6a569-f86a-4feb-a950-e4bf0d410050?m=MTUzNDE5ODc4NjgwOA== - manu_unter