配置 Storybook webpack 以使用 CRACO 覆盖答案

【问题标题】：Configure Storybook webpack to work with CRACO override配置 Storybook webpack 以使用 CRACO 覆盖
【发布时间】：2022-06-13 01:41:51
【问题描述】：

我一直在我正在使用的 React 应用程序中使用 storybook，但我在切换到新预设时遇到了一些困难。如下所示，当我运行以下脚本时，storybook 给了我一个关于预设的警告。

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.

主要问题是反应应用程序正在利用 Craco 覆盖默认反应配置。但是，当添加 @storybook/preset-create-react-app 时，Craco 也会阻止通过 npm run build-storybook 构建故事书。

这是我的故事书 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 包 storybook-preset-craco，但由于我正在使用的 react 应用程序的规模和安全性，我无法添加它。

【问题讨论】：

标签： reactjs webpack storybook craco

【解决方案1】：

为了将 Storybook 与 Creat React App (CRA) 与 Craco 一起使用，我安装了这个特定的预设：

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

查看插件的代码，它基于 CRA 的官方 Storybook 预设，但进行了必要的调整以使其适用于 Craco。我已经在各种应用中使用过它。

按照文档，这是使用方式：

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

# npm
npm install -D storybook-preset-craco

或

# yarn
yarn add -D storybook-preset-craco

安装后，将此预设添加到相应的文件中：

./.storybook/main.js

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

注意：不要忘记评论或从插件中删除@storybook/preset-create-react-app。

如果与 Docs Addon 一起使用，它还需要额外的配置，或者您需要指定 craco.config.js 的路径。您可以在插件的 README.md 中找到该信息。

【讨论】：