将童话webpack配置为使用CRACO覆盖

Question

我一直在使用我正在工作的React应用程序中的故事书，并且我在切换到新的预设时遇到了一些困难。如下图所示，当我运行下面的脚本时，故事书给了我一个关于预设的警告。

npm run build-storybook

WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install @storybook/preset-create-react-app and add it to the list of addons in your .storybook/main.js config file.
WARN The built-in preset has been disabled in Storybook 6.0.

主要问题是react应用程序正在使用Craco覆盖默认的react配置。然而，当@ npm run build-storybook /预设-创建-反应-应用程序被添加时，Craco也阻止了通过构建故事书。

这是我的故事书main.js文件

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss",
    "storybook-addon-designs",
    "@storybook/preset-create-react-app",
  ],
  "framework": "@storybook/react",
}

这是我的craco配置文件

const cracoGraphqlLoader = require("craco-graphql-loader");
const {whenDev} = require('@craco/craco')

module.exports = {
  plugins: [{ plugin: cracoGraphqlLoader }],
  webpack:{
    configure: (webpackConfig) =>{
      webpackConfig.devtool = whenDev(()=>"eval-source-map")
      return webpackConfig
    }
  },

};

我已经看过npm包故事书-预设-craco，但由于我正在工作的react应用程序的规模和安全性，我无法添加它。

Answer 1

为了使用Creat应用程序(CRA)和Craco一起使用Storybook，我安装了以下特定的预置：

https://www.npmjs.com/package/storybook-preset-craco

审查的密码，它是基于官方的故事簿预置的CRA，但与必要的调整，使它的工作为Craco。我在各种应用中都使用过它。

在文档之后，这是使用的方式：

1. 首先，将此预设安装到您的项目中.

# npm
npm install -D storybook-preset-craco

或

# yarn
yarn add -D storybook-preset-craco

​

一旦安装了

1. ，将此预置添加到适当的文件：

./.故事书/main.js

module.exports = {
  addons: ["storybook-preset-craco"],
};

注意:不要忘记评论或删除@storybook/预设-创建-反应-应用程序的加载项。

​

1. 如果与Docs一起使用，或者您需要指定craco.config.js的路径，它也需要额外的配置。您可以在README.md of the addon.

中找到该信息。