如何使用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，我继续看到 "Component selectors can only be used in conjunction with babel-plugin-emotion. "的消息，这意味着Emotion babel插件没有被Storybook选中。

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

这是我的tsconfig.和我的.babelrc。

{
  "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配置(除了那个)，有了这个，你在storybook上开发时就不会有类型选择，所以你应该检查一下这个是否符合你的需求。

希望对你有所帮助。