reactjs – 设置babel-plugin-styled-components Typescript create-react-app

我们目前正在尝试将babel-plugin-styled-components集成到我们的打字稿和基于create-react-app的设置中,以获得更好的调试体验,我们遇到了困难.

我们不愿意弹出应用程序,这就是我们尝试使用react-app-rewired设置它的原因,我们还设法使用react-app-rewire-typescript和react-app-rewire来编译我们的打字稿代码-styled组件.
但是出于某种原因,不应用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);
}

我不知道我们缺少什么.交换重新布线…封装的功能也没有帮助.

这里有没有人有经验或能指出我正确的方向？

如果你使用webpack,我找到了一个不需要使用babel的解决方案.

https://github.com/Igorbek/typescript-plugin-styled-components

要使用它,您可以使用webpack向您的打字机加载器添加自定义转换：

module: {
  rules: [
    {
      test: /\.tsx?$/,loader: 'awesome-typescript-loader',options: {
        getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
      }
    }

这解决了在使用样式组件和打字稿时不显示的displayName.