带有 craco 的 Storybook - 调用不同版本的 react-scripts

Question

Storybook 当前调用 react-scripts。但是，我已经用 craco 覆盖了 CRA 配置的某些部分。这意味着我的应用程序是用 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 文件中使用了别名功能，所以在这里我覆盖了 storybook 中的 webpack 配置，并且只添加了别名参数。对于您的情况，您需要添加自己的配置。

Answer 2

我已经在一个新的 CRA TypeScript 项目中成功地将 storybook-preset-craco 与 @storybook@6.3.5 和 react-scripts@4.0.3 以及 @craco/craco@6.2.0 一起使用。

Answer 3

@FR073N 的解决方案很好，但是自上次版本以来，这会引发错误。

缺少一行以正确地完全覆盖 webpack 配置。

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/'),
        },
      },
    };
  },
};

带有 craco 的 Storybook - 调用不同版本的 react-scripts

Storybook with craco - call a different verson of react-scripts

create-react-app

storybook

craco