如何在create-react-app中使用WebAssembly(wasm) [英] How to use WebAssembly (wasm) with create-react-app

问题描述

我将 create-react-app 和库与 wasm 一起使用，称为

I use create-react-app and library with wasm its called sax-wasm. Slightly modifying the sample code for the web I got this:

import { SaxEventType, SAXParser } from 'sax-wasm';

async function loadAndPrepareWasm() {
  const saxWasmResponse = await import('sax-wasm/lib/sax-wasm.wasm');
  const saxWasmbuffer = await saxWasmResponse.arrayBuffer();
  const parser = new SAXParser(SaxEventType.Attribute | SaxEventType.OpenTag, {
    highWaterMark: 64 * 1024,
  });

  const ready = await parser.prepareWasm(new Uint8Array(saxWasmbuffer));
  if (ready) {
    return parser;
  }
}

loadAndPrepareWasm().then(console.log);

当我运行 yarn start 命令时，我的构建失败:

When I running yarn start command my build is failed:

Failed to compile.

./node_modules/sax-wasm/lib/sax-wasm.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

推荐答案

以下解决方案适用于CRA3.x.对于CRA 4.x，您应该使用 craco .

The following solution is for CRA 3.x. For CRA 4.x you should use craco.

CRA不支持WASM.但是您可以解决它.您需要覆盖webpack配置.有多个软件包可以做到这一点.我使用了 react-app-rewired .而且您需要wasm-loader程序包

CRA does not support WASM. But you can workaround it. You need to override webpack config. There are multiple packages that can do it. I used react-app-rewired. And you need the wasm-loader package

比添加您的替代 config-overrides.js :

const path = require('path');

module.exports = function override(config, env) {

    /**
     * Add WASM support
     */

    // Make file-loader ignore WASM files
    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) {
                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;
};

在 package.json 中，我是这样的:

{
...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
...
  "devDependencies": {
    "react-app-rewired": "2.1.3",
    "wasm-loader": "1.3.0"
  }
}

这篇关于如何在create-react-app中使用WebAssembly(wasm)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！