设置babel-plugin-styled component+ Typescript + create-react-app
我们目前正在尝试将babel-plugin-styled-components集成到基于typescript和create-react-app的设置中，以获得更好的调试体验，但我们在这样做时遇到了困难。
我们不愿意弹出这个应用程序，这就是为什么我们尝试使用react-app-rewired设置它，我们也设法让我们的typescript代码使用react-app-rewire-typescript和react-app-rewire-styled-components一起编译。然而，由于某些原因，displayName没有被应用，这让我认为巴别塔插件没有被应用。我们使用"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...函数的封装也没有帮助。
这里有没有人有这方面的经验，或者能给我指出正确的方向？
回答 2
Stack Overflow用户
发布于 2018-08-24 05:40:27
如果你使用的是webpack，我找到了一个不需要使用巴别塔的解决方案。
https://github.com/Igorbek/typescript-plugin-styled-components
要使用它，您需要使用webpack在您的typescript加载器中添加一个自定义转换：
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
}
}这解决了使用样式化组件和typescript时displayName不显示的问题。
Stack Overflow用户
发布于 2018-09-26 09:59:06
我通过使用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;
}https://stackoverflow.com/questions/49584827
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号