如何在Storybook + Typescript中使用Babel情感插件？

pgky5nke 于 2022-12-08 发布在 Babel

关注(0)|答案(2)|浏览(160)

我目前正在使用带有TypeScript的Storybook（v.5.3.18），并成功地按照说明设置了我的TypeScript webpack.config.js。
然而，我似乎找不到任何方法成功地添加一个巴别塔插件到配置。我的最新尝试是下面，这不工作。

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;
};

如果我用这个配置 Boot Storybook，我会继续看到消息“Component selectors can only be used in joint with babel-plugin-emotion."，这意味着情感巴别塔插件没有被Storybook选中。
我没有使用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"
  ]
}

还有我。

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

有什么建议吗？

谢谢-谢谢

babeljs

来源：https://stackoverflow.com/questions/61781954/how-to-use-babel-emotion-plugin-with-storybook-typescript

2条答案

按热度按时间

tsm1rwdh1#

我不知道是否可以解决您的问题，但我通过在.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配置（除了那一个），有了这个，你就不会有类型chicking时，开发的故事书，所以你应该检查，如果这符合你的需要。
希望能有所帮助。

赞(0）回复(0）举报 2022-12-08

umuewwlo2#

这个对我有用：
第一次添加

devDependency:
  "babel-plugin-emotion": "^10.0.33",

然后在storybook main.js配置文件中添加以下内容

module.exports = {
  ...

  babel: async (options) => ({
    ...options,
    plugins: ['emotion']
  }),

  ...
}

赞(0）回复(0）举报 2022-12-08

我来回答

如何在Storybook + Typescript中使用Babel情感插件？

2条答案

相关问题

热门标签

最新问答