我如何配置Storybook使用React-App-Rewired?

Question

我正在研究一个项目，实现react-app-rewired发送头到服务器，以绕过ReferenceError: SharedArrayBuffer is not defined(我从使用@ffmpeg/ffmpeg库获得此错误)。

// config-overrides.js
const {
override,
// disableEsLint,
// addBabelPlugins,
// overrideDevServer
} = require('customize-cra')
module.exports = {
devServer(configFunction) {
// eslint-disable-next-line func-names
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost)
// Set loose allow origin header to prevent CORS issues
config.headers = {
'Access-Control-Allow-Origin': '*',
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Resource-Policy': 'cross-origin'
}
return config
}
}
}

// package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test  --transformIgnorePatterns "node_modules/(?!siriwave)/"",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
}

虽然这工作，当我运行npm start，意味着头被发送到服务器，它不工作，当我运行npm run storybook，我仍然得到SharedArrayBuffer is not defined错误。我假设这是因为npm run storybook仍然使用react-scripts而不是react-app-rewired在引擎盖下，但我不确定在哪里我可以改变这个配置。什么好主意吗?

Answer 1

你可以像这样在storybook/main.js中添加一个自定义的webpack配置:https://storybook.js.org/docs/react/builders/webpack

所以你可以像修改react-app-rewired

一样修改webpack