我如何配置故事簿来使用Reacti-App-Re有线？

Question

我正在进行一个项目，该项目实现了将头发送到服务器以绕过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

您可以在故事书/main.js中添加自定义webpack配置，如：https://storybook.js.org/docs/react/builders/webpack

因此，您可以使用webpack的修改，就像使用react重新连线一样。