设置 babel-plugin 样式的组件 + 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的问题。

Answer 2

我通过使用 react-app-rewired 在配置覆盖中添加类似的东西.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;
}