使用 webpack/rollup/browserify 支持 WebAssembly 引入

随着 WebAssembly 迅速的发展，网络上关于 WebAssembly 的文章和工具越来越多。

今天推荐三个常用构建工具支持文件引入 wasm 的方法。分别通过 Webpack/Rollup/Browserify 来支持。

wasm 文件

在这个介绍开始之前，我们需要一个 wasm 文件来确保我们接下来的事情可以正常进行，作为 Demo，我们可以通过 WasmExplorer 或者 WasmFiddle 来生成一个。

为了方便，我们使用 WasmFiddle： 打开 WasmFiddle 在左边输入 C 语言代码：

extern int log (int num);
void test () {
  log(1234567890);
}

这段代码的意思是：

  • 我们定义一个 log 方法，这个 log 方法是 JavaScript 传过来的
  • 定义一个函数 test，当执行函数 test 的时候，将会调用 log 方法，并且传递 1234567890 作为参数。

点击上方的 Build，如果成功，可以看到左下角出现与之对应的 wast 代码，然后点击 wast 上面一行的 wasm 下载按钮。这样我们就把一个简单的 wasm 下载下来了。

如果我们不用下面我将要介绍的工具，我们引入并调用的代码将会是这样的：

const importObject = {
    env: {
        log: (num) => console.log(num)
    }
};

fetch('./program.wasm')
    .then(result => result.arrayBuffer())
    .then(buffer => new WebAssembly.Module(buffer))
    .then(module => new WebAssembly.Instance(module, importObject))
    .then(instance => instance.exports.test())
  • 我们创建了一个 importObject，其中有一个 env 属性里面有个 log 方法，这就是我们要传递给 wasm 的方法。
  • 获取出 program.wasm 的内容，调用 arrayBuffer() 返回文件的 ArrayBuffer
  • 使用 new WebAssembly.Module(ArrayBuffer) 获取 wasm 的 module
  • 通过 new WebAssembly.Instance(module, importObject) 创建一个实例
  • 调用实例 exports 上的 test()

Webpack

wasm-loader 早在今年三月份就出现了，它支持你的 JS 文件可以以 ES Module 的形式引入 .wasm 文件，使用起来非常简单。

首先需要安装 webpack loader：

npm install --save wasm-loader

在 webpack.config.js 中引入 loader：

loaders: [
    {
        test: /\.wasm$/,
        loaders: ['wasm-loader']
    }
]

那么，我们在 JS 文件中就可以直接引入 wasm 文件了！

import wasm from './program.wasm'

const importObject = {
    env: {
        log: (num) => console.log(num)
    }
};
wasm(importObject)
    .then(({instance, module})=> instance.exports.test())

Rollup

与 webpack 的 wasm-loader 相比，Rollup 的更能更为广泛。

你既可以直接在文件中引入 wasm 文件，也可以引入可以编译成 wasm 文件的源代码，比如 C, C++, Wat, Rust。

安装方式：

npm i -D rollup-plugin-wasm

​

版权声明

知识共享许可协议
本博客文章均为 范明非 原创或翻译，采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
原文地址： https://fanmingfei.com/posts/The_way_to_import_wasm_with_workflow.html