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

Question

我可以成功地运行storybook并在storybook项目文件夹中开发React组件。但是，我正在尝试将包含所有组件的文件夹向上移动一个级别（成为storybook文件夹的同级文件夹）。

这样，文件结构不再像这样：

storybook
├── components
│   ├── Foo.js
│   └── Bar.js
├── stories
│   ├── index.stories.js

我有这样一个文件夹结构：

my_example_project
├── my_components
│   ├── Foo.js
│   └── Bar.js
├── my_storybook
│   ├── ...

当我尝试将一个组件导入到story中时，却出现了以下错误。

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

我尝试通过在我的storybook .storybook文件夹中添加一个webpack.config.js文件来配置我的webpack，以解析组件文件夹，内容如下：

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // Make whatever fine-grained changes you need

  config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: [/bower_components/, /node_modules/, /styles/],
      loader: 'babel-loader',
      include: path.resolve(__dirname, '../my_components/*'),
      query: {
    presets: ['@babel/preset-react']
  }
});


  // Return the altered config
  return config;
};

然而，我遇到了相同的错误。我做错了什么？

这里是完整示例项目的GitHub链接

- J-fish

---

你最终解决了这个问题吗？ - scoob

很遗憾，不行。 我想这样做是因为我想让另一个项目目录使用组件作为“共享组件”库。 我的解决方法是将组件文件夹保留在storybook中，并将该项目目录的路径别名指向storybook文件夹... 这并不理想，我仍然希望了解发生了什么。 - J-fish

听起来我们正在尝试做类似的事情。我觉得可能有一些与Babel配置相关的东西可以正确地关联所有内容，但我很难弄清楚：https://babeljs.io/docs/en/config-files/#project-wide-configuration - scoob

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

- Chad Johnson

---

在我的情况下，配置要复杂得多。有一个“oneOf”部分，在其中我找到了使用babel-loader的规则。但总体思路是可行的。非常感谢！ - zubko

Answer 2

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

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

默认情况下，它有include：['./']，将其删除应该可以使其工作，我想。

- Norbert

Answer 3

在 Storybook v6 中，答案有些不同。

  // Inside storybook config
  webpackFinal: async (config) => {
    // Transpile local dependencies
    config.module.rules[5].oneOf[3].include.push(path.resolve(__dirname, 'YOUR_PATH'));

    return config;
  },

当然，双重检查规则索引是否适用于您的情况，但这就是要点。找到babel-loader配置并添加包含路径。

- Mr Br