Question

我们目前正在尝试将babel-plugin-styled-components集成到基于typescript和create-react-app的设置中，以获得更好的调试体验，而且我们遇到了困难。

我们不愿意弹出应用，这就是我们尝试使用react-app-rewired进行设置的原因，我们还设法使用react-app-rewire-typescript和{{1}来编译我们的打字稿代码}。但是出于某种原因，react-app-rewire-styled-components未应用，这使我认为babel插件未应用。我们使用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); }函数的封装也无济于事。

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

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在使用样式组件和打字稿时不显示的情况。

Answer 2

我通过使用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;
}

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

2 个答案: