如何将 babel-emotion-plugin 与 Storybook + Typescript 结合使用？

Question

我目前正在使用 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，我会继续看到消息“组件选择器只能与 babel-plugin-emotion 结合使用。”，这意味着 Storybook 没有选择 Emotion babel 插件。

我没有使用 CRA，只是使用普通的 React 和 Typescript。

这是我的 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"
  ]
}

和我的 .babelrc：

{
  "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"
        }
      }
    ]
  ]
}

有什么建议么？

谢谢。

Answer 1

我不知道是否可以解决您的问题，但我通过使用以下配置得到了我的问题.storybook/main.js：

module.exports = {
  stories: ['../packages/**/*.stories.tsx'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        plugins: ['emotion'],
        presets: [['react-app', { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

我没有使用任何自定义 webpack 配置（除了该配置），这样您在故事书上开发时就不会进行类型检查，因此您应该检查这是否符合您的需求。

希望它能有所帮助。