Javascript 您能将带有wasm文件的模块加载到CreateReact应用程序中吗？

我正在尝试将此模块加载到create react应用程序项目中：

当我这样做时，我得到以下错误：

./node_modules/wasmlibfp/wasmlibfp_bg.wasm
Module parse failed: magic header not detected
File was processed with these loaders:
 * ./node_modules/file-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected

---

要在CRA中加载wasm模块，我需要做什么特殊的事情吗？

是的，您可以将带有wasm文件的模块加载到create react应用程序项目中。为此，您需要对CRA项目进行一些修改。以下步骤来自Richard Reedy编写的：

创建CRA： 安装

react应用程序重新布线

和

wasm加载程序

依赖项： 添加包含以下内容的

config overrides.js

文件： 将CRA NPM脚本更改为使用重新布线的

react应用程序，而不是
react脚本
：
安装wasm依赖项：
在JS代码中异步加载WASM：
，所以您需要添加加载它的JS代码（我把它放在
App.JS
）：

如果已加载wasm代码，请在应用程序中使用该代码：
render（）{
const{wasm={}}=this.state；
返回(
{wasm.doStuff&&wasm.doStuff（）}
);
您可以尝试创建一个普通的react应用程序，然后尝试安装依赖项

npm install --save wasmlibfp

我也有同样的问题，你找到解决办法了吗？
npm install react-app-rewired wasm-loader -D

const path = require('path');

module.exports = function override(config, env) {
  const wasmExtensionRegExp = /\.wasm$/;

  config.resolve.extensions.push('.wasm');

  config.module.rules.forEach(rule => {
    (rule.oneOf || []).forEach(oneOf => {
      if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
        // make file-loader ignore WASM files
        oneOf.exclude.push(wasmExtensionRegExp);
      }
    });
  });

  // add a dedicated loader for WASM
  config.module.rules.push({
    test: wasmExtensionRegExp,
    include: path.resolve(__dirname, 'src'),
    use: [{ loader: require.resolve('wasm-loader'), options: {} }]
  });

  return config;
};

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

npm install --save wasmlibfp

componentDidMount() {
  this.loadWasm();
}

loadWasm = async () => {
  try {
    const wasm = await import('external');
    this.setState({wasm});
  } catch(err) {
    console.error(`Unexpected error in loadWasm. [Message: ${err.message}]`);
  }
};

render() {
  const { wasm = {} } = this.state;
  return (
    <div className="App">
      { wasm.doStuff && wasm.doStuff() }
    </div>
);

npm install --save wasmlibfp