Storybook не понимает импорт по запросу для компонентов antd

Я выполнил инструкции здесь, чтобы получить antd отлично работает с CRA. Но при использовании его из сборника рассказов я получал ошибку как:

Сбой сборки миксина с сообщением «Встроенный JavaScript не включен». Это установлено в ваших настройках?

Я исправил, что после предложений по проблеме, которую я поднял здесь .

Теперь сборник рассказов понимает antd , но не импортирует компоненты по запросу. Нужно ли настраивать babel отдельно для сборника рассказов?

1. При использовании import { Button } from "antd"; я получаю следующее:

image

2. При использовании

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

Я получил:

image

Версия сборника рассказов: @ storybook / react: ^ 3.4.8

Зависимость: antd: ^ 3.7.3

Я застрял (снова) с этим в течение довольно долгих часов, гуглил, любая помощь приветствуется. Спасибо!


reactjs create-react-app antd storybook
person devautor    schedule 03.08.2018    source источник
comment
вы пробовали `` импортировать {Button} из antd; импортировать antd / lib / button / style; `` `?   -  person Vasiliy Vanchuk    schedule 12.09.2018

Ответы (3)


arrow_upward
7
arrow_downward

Используя Storybook 4, вы можете создать файл webpack.config.js в каталоге .storybook со следующей конфигурацией:

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, "../")
            }
        ]
    }
};

Обратите внимание, что приведенный выше фрагмент включает в себя перезапись стиля основного цвета кнопки в antd. Я подумал, что вы, возможно, захотите в конечном итоге отредактировать тему по умолчанию, чтобы вы могли удалить эту строку, если вы не собираетесь этого делать.

Теперь вы можете импортировать компонент Button в Storybook, используя:

import {Button} from "antd";

без необходимости также импортировать файл стиля.

person cheickmec    schedule 26.11.2018
comment
Каким образом стиль Button волшебным образом появляется без импорта разработчиком? - person vsync; 26.05.2019
comment
@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>); - person cheickmec; 27.05.2019

arrow_upward
2
arrow_downward

Если вы используете AntD Advanced-Guides для React и сборник рассказов 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.

person Gerrie van Wyk    schedule 28.04.2019

arrow_upward
1
arrow_downward

В настоящее время я использую сборник рассказов с antd, и я заставил его играть хорошо, используя эту конфигурацию в моем файле webpack.config.js в папке .storybook:

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;
};
person scroobius    schedule 06.10.2018