时间戳

首页 > 解决方案 > 您可以将带有 wasm 文件的模块加载到 create-react-app 中吗？

javascript - 您可以将带有 wasm 文件的模块加载到 create-react-app 中吗？

问题描述

我正在尝试将此模块加载到 create-react-app 项目中：https ://www.npmjs.com/package/wasmlibfp

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

./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 模块需要做些什么特别的事情吗？

标签： javascriptwebpackcreate-react-appwebassembly

解决方案

是的，您可以将带有 wasm 文件的模块加载到 create-react-app 项目中。为此，您需要对 CRA 项目进行一些修改。以下步骤来自 Richard Reedy 的Using WebAssembly with React 教程：

创建 CRA：

npx create-react-app react-wasm-migration

安装react-app-rewired和wasm-loader依赖：

npm install react-app-rewired wasm-loader -D

添加config-overrides.js具有以下内容的文件：

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;
};

将 CRA NPM 脚本更改为使用react-app-rewired，而不是react-scripts：

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

安装你的 wasm 依赖：

npm install --save wasmlibfp

在 JS 代码中异步加载 WASM：

WebAssembly 必须异步加载，因此您需要添加加载它的 JS 代码（我将其放入App.js）：

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}]`);
  }
};

如果已加载，请在应用程序中使用 wasm 代码：

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

推荐阅读