设置babel-plugin-styled-components + Typescript + create-react-app

Question

目前,我们正在试图将整合babel-plugin-styled-components到我们typescript和create-react-app基础设置一个更好的调试经验,我们有困难,这样做.

我们不愿意弹出应用程序,这就是我们尝试使用它进行设置的原因,react-app-rewired并且我们还设法将我们的打字稿代码react-app-rewire-typescript与其一起编译react-app-rewire-styled-components.但是由于某些原因,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...函数的封装也没有帮助.

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

Answer 1

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

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

要使用它，您可以使用 webpack 将自定义转换添加到您的打字稿加载器：

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

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