在打字稿中调试样式组件

Question

考虑到用 babel-plugin 包装 typescript 来调试样式组件（例如，在开发工具中查看组件名称）并不好，我怎样才能实现相同的功能？

谢谢

Answer 1

感谢您的建议我最终在 typescript 之上添加了 babel，它工作正常。

如果有人决定在这里做同样的事情，这是 webpack 规则（虽然很平庸）：

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/env", {
              "targets": ["> 1%"]
            }],
            "@babel/react"
          ],
          plugins: [
            // "lodash",
            "babel-plugin-styled-components",
            "babel-plugin-transform-react-stateless-component-name"
          ]
        }
      },
      {
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            jsx: 'preserve',
            module: 'es2015'
          }
        }
      }
    ],
    include: SRC_ROOT
  }

不得不跳过 .babelrc，因为 storybook 在找到自定义 .babelrc 文件时开始产生错误。

在打字稿中调试样式组件

Debugging styled-components in typescript

typescript

reactjs

styled-components