Storybook 不理解 antd 组件的按需导入

Posted 2023-02-19

【中文标题】Storybook 不理解 antd 组件的按需导入

【英文标题】：Storybook doesn't understand import on demand for antd components

【发布时间】：2019-01-11 18:13:59

【问题描述】：

我在这里关注instructions 让 antd 与 CRA 一起正常工作。但是在 storybook 中使用它时，我收到了一个 错误：

针对 mixin 构建失败并显示消息 Inline javascript is not 启用。是否在您的选项中设置？

我已经修复了以下关于我提出的问题的建议 here。

现在，storybook 可以理解 antd 但不能按需导入组件。 babel 必须单独为 storybook 配置吗？

1。关于使用import Button from "antd"; 我明白了：

2。关于使用

import Button from "antd/lib/button";
import "antd/lib/button/style";

我明白了：

故事书版本：“@storybook/react”：“^3.4.8”

依赖：“antd”：“^3.7.3”

我已经（再次）被这个问题困扰了很长时间，在谷歌上搜索东西，感谢任何帮助。谢谢！

【问题讨论】：

你试过 ```import Button from "antd";导入“antd/lib/按钮/样式”； ```` ?

【参考方案1】：

我目前正在使用带有 antd 的故事书，并且通过在 .storybook 文件夹中的 webpack.config.js 文件中使用此配置，我让它玩得很好：

const  injectBabelPlugin  = require('react-app-rewired');
const path = require("path");

module.exports = function override(config, env) 
config = injectBabelPlugin(
['import',  libraryName: 'antd', libraryDirectory: 'es', style: 'css' ],
config,
);



config.module.rules.push(
  test: /\.css$/,
  loaders: ["style-loader", "css-loader", ],
  include: path.resolve(__dirname, "../")
  )


return config;
;

【参考方案2】：

使用 Storybook 4，您可以在 .storybook 目录中创建一个 webpack.config.js 文件，配置如下：

const path = require("path");

module.exports = 
    module: 
        rules: [
            
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: 
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', libraryName: "antd", style: true]
                    ]
                ,
            ,
            
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    
                        loader: "less-loader",

                        options: 
                            modifyVars: "@primary-color": "#d8df19",
                            javascriptEnabled: true
                        
                    
                ],
                include: path.resolve(__dirname, "../")
            
        ]
    
;

注意，上面的 sn-p 包括了 antd 中主按钮颜色的样式覆盖。我想，您可能希望最终编辑默认主题，以便在您不打算这样做时删除该行。

您现在可以使用以下方法在 Storybook 中导入 Button 组件：

import Button from "antd";

无需同时导入样式文件。

【讨论】：

Button 样式如何在没有被开发者导入的情况下神奇地出现？

@vsync Button 的样式正在由 babel_plugin_import import Button from 'antd'; ReactDOM.render(<Button>xxxx</Button>); -----> var _button = require('antd/lib/button'); ReactDOM.render(<_button>xxxx</_button>); 导入

【参考方案3】：

如果您使用的是 AntD Advanced-Guides for React 和 storybook v5，请使用以下内容创建 .storybook/webpack.config.js：

const path = require('path');

module.exports = async ( config, mode ) => 

  config.module.rules.push(
      loader: 'babel-loader',
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      options: 
          presets: ['@babel/react'],
          plugins: [
              ['import', 
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
              ]
          ]
      ,
  );

  config.module.rules.push(
      test: /\.less$/,
      loaders: [
          'style-loader',
          'css-loader',
          
              loader: 'less-loader',
              options: 
                  modifyVars: '@primary-color': '#f00',
                  javascriptEnabled: true
              
          
      ],
      include: [
        path.resolve(__dirname, '../src'),
        /[\\/]node_modules[\\/].*antd/
      ]
  );

  return config;
;

然后就可以使用import Button from 'antd'来导入antd组件了。