如何在 storybook 中配置 webpack 以允许 babel 导入项目文件夹外的 react 组件

Question

我能够成功运行故事书并在故事书项目文件夹中开发反应组件。但是，我试图将包含我所有组件的文件夹向上移动一个级别（成为故事书文件夹的同级文件夹）。

所以，而不是这样的结构

storybook
??? components
?   ??? Foo.js
?   ??? Bar.js
??? stories
?   ??? index.stories.js

我有这样的文件夹结构

my_example_project
??? my_components
?   ??? Foo.js
?   ??? Bar.js
??? my_storybook
?   ??? ...

但是，当我尝试将组件导入故事时，出现以下错误

ERROR in ../my_components/Bar.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const Bar = () => {
>   return <div>I am a Bar</div>;
| };

我已经尝试通过将webpack.config.js文件添加到我的 storybooks .storybook 文件夹来配置我的 webpack 来解析 components 文件夹，看起来像这样

storybook
??? components
?   ??? Foo.js
?   ??? Bar.js
??? stories
?   ??? index.stories.js

但是，我遇到了同样的错误。我究竟做错了什么？

这是完整示例项目示例的github 链接

Answer 1

我通过.storybook/main.js如下编辑来完成此操作：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.js',
    '../../../packages/react-components/src/**/*.stories.js'
  ],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-viewport'
  ],

  webpackFinal: async (config) => {
    // Ensure shared component stories are transpiled.
    config.module.rules[0].include.push(
      path.resolve('../../packages/react-components/src')
    );

    return config;
  }
};

Answer 2

使用这个：https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config

调试最终的 webpack 配置。您可能需要更改 babel-loader 的包含和排除。

我认为默认情况下它就include: [ './' ]在那里，删除它应该可以正常工作。