Javascript 如何在故事书中使用babel情感插件+；打字稿？

我目前正在将Storybook（v.5.3.18）与TypeScript一起使用，并成功地按照说明设置了我的TypeScript webpack.config.js。这个很好用

然而，我似乎找不到任何方法可以成功地将babel插件添加到配置中。我的最新尝试如下，但无效

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          exclude: /node_modules/,
          presets: [['react-app', { flow: false, typescript: true }]],
          configFileName: './.storybook/tsconfig.json',
          babelOptions: {
            babelrc: false,
            presets: [],
            plugins: ['emotion'],
          },
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {},
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

如果我使用此配置启动Storybook，我会继续看到消息“Component selectors只能与babel插件emotion一起使用”，这意味着Storybook不会选择emotion babel插件

我没有使用CRA，只是简单的ol'React和打字脚本

这是我的tsconfig：

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "types": ["react", "node"],
    "baseUrl": "../",
    "paths": {
      "~*": ["./src*"],
      "components": ["./src/components/*"],
      "ui-components": ["./src/ui-components/*"],
      "pages": ["./src/pages/*"],
      "common": ["src/common/*"],
      "mocks": ["./mocks/*"],
      "lib": ["./lib/*"]
    }
  },
  "include": ["src/**/*", "../src/typings.d.ts"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}

还有我的。巴别塔：

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "inline-svg",
    ["emotion", { "inline": true }],
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "~": "./src",
          "common": "./src/common",
          "components": "./src/components",
          "ui-components": "./src/ui-components",
          "lib": "./lib",
          "pages": "./pages",
          "static": "./public/static"
        }
      }
    ]
  ]
}

有什么建议吗

---

谢谢。

我不知道是否可以解决您的问题，但我的问题是通过在

中使用此配置得到的。storybook/main.js

：

module.exports={
故事：['../packages/***.stories.tsx']，
WebPackageFinal:async（配置）=>{
config.module.rules.push({
测试：/\（ts|tsx）$/，
loader:require.resolve（'babel-loader'），
选项：{
插件：[“情感”]，
预设：['react-app'，{flow:false，typescript:true}]，
},
});
config.resolve.extensions.push（'.ts'，'.tsx'）；
返回配置；
},
};

我没有使用任何自定义的webpack配置（除此之外），在开发storybook时，使用此配置，您将不会有类型缩鸡，所以您应该检查此配置是否符合您的需要

希望能有所帮助