webpack import wasm | 易学教程

编译

也可以使用 -Os 优化, 兼顾性能和大小

emcc -O3   \
    -s WASM=1 \
    -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap","ccall"]' \
    -s EXPORTED_FUNCTIONS='["_main","_fibArray","_fib"]' \
    -s ALLOW_MEMORY_GROWTH \
    -s ENVIRONMENT='web' \
    -s EXPORT_ES6=1 \
    -s MODULARIZE=1 \
    -s STRICT=1 \
    -o fibArray.js \
    --bind \
    fibArray.cpp

webpack.config

如果需要使用 import.meta的话, 那么需要使用loader转码, 否则会报错

@open-wc/webpack-import-meta-loader

babel也有相应的插件

      {
        test: /\.wasm$/,
        type: "javascript/auto",
        use: {
          loader: "url-loader",
          options: { limit: 8192, name: "[name].[ext]" },
        },
      },



  node: {
    fs: "empty", // ← !!
    __dirname: false,
    Buffer: false,
    process: false,
  },

换掉这个, 这东西表示wasm文件所在的目录, 默认使用import.meta.url 得到, 会导致层级失效

最好是能够确定路径后写死.....

在这里引入wasm文件是为了保证webpack会把该文件和js打包到dist目录下

import wasm from "./fibArray";
import url from "./fibArray.wasm";
console.log("url", url);
console.log("wasm", wasm);
wasm().then((wasmModule) => {
  console.log("data", wasmModule);
  for (let i = 0; i < 10; i++) {
    console.log("fib", i, wasmModule._fib(i));
  }

  const fib = wasmModule["_fib"];
  for (let i = 0; i < 10; i++) {
    console.log("fib", i, fib(i));
  }

  const size = 10;
  const ccall = wasmModule.ccall;
  const bufferIntArray = Array(size)
    .fill()
    .map((_, i) => i);
  const numBytes = Int32Array.BYTES_PER_ELEMENT * size;
  const ptr = wasmModule._malloc(numBytes);
  const heapBytes = new Uint32Array(wasmModule.HEAP32.buffer, ptr, numBytes);
  heapBytes.set(new Int32Array(bufferIntArray));
  const resultPtr = ccall(
    "fibArray",
    "Int32Array",
    ["Int32Array", "number"],
    [heapBytes.byteOffset, size]
  );
  console.log("resultPtr", resultPtr);
  const resultArray = new Int32Array(wasmModule.HEAP32.buffer, resultPtr, size);
  console.log("resultArray", resultArray);
  console.log("raw", new Int32Array(wasmModule.HEAP32.buffer, ptr, size));
});

可以看到输出是正常的

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4497925

标签

Webpack

babel

javascript