如何在故事书中配置 webpack 以允许 babel 在项目文件夹之外导入反应组件

Posted

技术标签:

【中文标题】如何在故事书中配置 webpack 以允许 babel 在项目文件夹之外导入反应组件【英文标题】:How to configure webpack in storybook to allow babel to import react components outside of project folder 【发布时间】:2019-10-27 13:01:57 【问题描述】:

我能够成功运行故事书并在故事书项目文件夹中开发反应组件。但是,我正在尝试将包含我所有组件的文件夹上移一个级别(成为故事书文件夹的兄弟)。

所以不是这样的结构

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 来解析组件文件夹,如下所示


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 link

【问题讨论】:

你有想过这个吗? 很遗憾没有。我想要这个是因为我想让另一个项目目录将组件用作“共享组件”库。我的解决方法是将 components 文件夹保留在 storybook 中,并将该项目目录的路径别名到 storybook 文件夹......这并不理想,我仍然很想了解发生了什么 听起来我们正在尝试做类似的事情。我觉得 babel config 可能有些东西可以正确关联所有内容,但我无法弄清楚:babeljs.io/docs/en/config-files/#project-wide-configuration 【参考方案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;
  
;

【讨论】:

就我而言,配置要复杂得多。有一个“oneOf”部分,我在其中找到了 babel-loader 的规则。但总体思路奏效了。非常感谢!【参考方案2】:

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

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

默认情况下它有include: [ './' ],我认为删除它应该可以工作。

【讨论】:

以上是关于如何在故事书中配置 webpack 以允许 babel 在项目文件夹之外导入反应组件的主要内容,如果未能解决你的问题,请参考以下文章

使用故事书中的反应原生矢量图标反应原生 Web 问题

如何在故事书中显示 material-ui 主题对象

如何更改故事书中的特定元素样式?

带有绝对路径的故事书

如何使用 Shebang Loader 配置 Webpack 以忽略 Hashbang 将 Cesium React 组件导入 Typescript React 组件

如何在故事书中注入窗口变量?