配置Storybook webpack以使用CRACO override

Question

我一直在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.

主要问题是react应用程序正在使用Craco来覆盖默认的react配置。然而，当添加@storybook/preset-create-react-app时，Craco也会阻止storybook通过npm run build-storybook构建。

这是我的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- crao，但是由于我正在使用的react应用程序的规模和安全性，我不能添加它。

Answer 1

使用creatreactapp (CRA)与Craco我安装了这个特定的预设:

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

2. 安装后，将此预设添加到相应的文件:

。/.storybook main.js

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

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

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