Сборник рассказов с Craco - вызовите другую версию сценариев реакции

Question

Сказочная книга сейчас звонит react-scripts. Однако у меня есть некоторые части конфигурации CRA, переопределенные с помощьюcraco. Это означает, что мое приложение вызывается сcraco ..., скорее, чем react-scripts ....

Есть ли чистое решение для вызова Storybook craco вместо?

Answer 1

Решение, которое я придумал, таково:

.storybook / main.js:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
    '@storybook/addon-knobs/register',
  ],
  webpackFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        alias: {
          ...config.resolve.alias,
          '~': path.resolve(__dirname, '../src/'),
        },
      },
    };
  },
};

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

Answer 2

Решение @FR073N хорошее, но, начиная с последних версий, выдает ошибку.

Отсутствовала одна строка, чтобы полностью переопределить конфигурацию веб-пакета.

      const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
    '@storybook/addon-knobs/register',
  ],
  webpackFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        ...config.resolve, // <= HERE
        alias: {
          ...config.resolve.alias,
          '~': path.resolve(__dirname, '../src/'),
        },
      },
    };
  },
};

Answer 3

как сказал Ник Рибал, я успешно использовал storybook-preset-craco с @ и и @craco/ [электронная почта защищена][электронная почта защищена][электронная почта защищена] в новом проекте CRA TypeScript. работал со мной как шарм

Answer 4

Я успешно использовал Storybook-Preset-Craco с @storybook@6.3.5 и react-scripts@4.0.3 и @craco/craco@6.2.0 в новом проекте CRA TypeScript.