4

Storybook 目前调用react-scripts. 但是，我已将 CRA 配置的某些部分覆盖为craco. 这意味着我的应用程序是用 调用的craco ...，而不是react-scripts ....

是否有一个干净的解决方案来craco代替 Storybook 调用？

4

3 回答 3

2

我想出的解决方案是这样的：

.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 配置，只添加了别名参数。对于您的情况，您需要添加自己的配置。

于 2020-05-17T13:29:30.863 回答
1

@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/'),
        },
      },
    };
  },
};
于 2022-01-04T14:52:13.373 回答
-1

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

于 2021-07-24T23:47:00.933 回答