[英]Setting up babel-plugin-styled-components + Typescript + create-react-app
We are currently trying to integrate the babel-plugin-styled-components
into our typescript
and create-react-app
based setup for a better debugging experience and we are having difficulties doing so. 我们目前正在尝试将babel-plugin-styled-components
集成到我们的typescript
和基于create-react-app
的设置中,以获得更好的调试体验,我们遇到了困难。
We are reluctant to eject the app, which is why we are trying to set it up using react-app-rewired
and we also managed to get our typescript code to compile using react-app-rewire-typescript
along with react-app-rewire-styled-components
. 我们都不愿意退出应用程序,这就是为什么我们正试图将其设置使用react-app-rewired
,我们也设法让我们的打字稿代码中使用编译react-app-rewire-typescript
沿react-app-rewire-styled-components
。 For some reason however, the displayName
is not applied, which makes me think the babel plugin is not applied. 但是出于某种原因,不应用displayName
,这使我认为不应用babel插件。 We are using "start": "react-app-rewired start"
as our dev server script and the config-overrides.js
looks like this: 我们使用"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);
}
I have no idea what we are missing. 我不知道我们缺少什么。 Swapping the encapsulation of the rewire...
functions also didn't help. 交换rewire...
封装功能也没有帮助。
Does anyone here have experience with that or can point me in the right direction? 这里有没有人有经验或能指出我正确的方向?
If you are using webpack, I found a solution that did not require using babel. 如果你使用webpack,我找到了一个不需要使用babel的解决方案。
https://github.com/Igorbek/typescript-plugin-styled-components https://github.com/Igorbek/typescript-plugin-styled-components
To use it, you add a custom transform to your typescript loader with webpack: 要使用它,您可以使用webpack向您的打字机加载器添加自定义转换:
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
}
}
This solves the displayName
not showing when using styled-components and typescript. 这解决了使用样式组件和打字稿时不显示的displayName
。
I solved the issue by add something like this in config-overrides.js using react-app-rewired: 我通过使用react-app-rewired在config-overrides.js中添加类似的东西解决了这个问题:
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const styledComponentsTransformer = createStyledComponentsTransformer();
module.exports = function override(config, env) {
const rule = config.module.rules.filter(l => l.oneOf)[0];
const tsLoader = rule.oneOf.filter(l => String(l.test) === String(/\.(ts|tsx)$/))[0];
tsLoader.use[0].options.getCustomTransformers = () => ({
before: [styledComponentsTransformer]
});
return config;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.