如何使用 wasm-bindgen 调用作为模块的 JavaScript 函数？答案

【问题标题】：How can I call a JavaScript function that is a module with wasm-bindgen?如何使用 wasm-bindgen 调用作为模块的 JavaScript 函数？
【发布时间】：2021-02-27 06:39:41
【问题描述】：

我正在尝试使用 Rust 的 Web3 JavaScript 库，但我被卡住了。该库的标准用法开头是：

// In Node.js use: const Web3 = require('web3');

let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

您应该导入的模块是一个构造函数，它还具有一些其他属性。我应该绑定此 API 的 Rust 代码如下所示：

#[wasm_bindgen(module = "web3")]
extern "C" {
    type Web3;

    #[wasm_bindgen(constructor)]
    fn new(_: &Provider) -> Web3;

    type Provider;

    static givenProvider: Provider;
}

最终输出 import { Web3, givenProvider } from 'web3'; 并尝试运行 new Web3(...) 失败。它应该执行类似import * as Web3 from 'web3';、运行new Web3(...) 和引用Web3.givenProvider 的操作。

如何让 wasm-bindgen 输出这样的代码？

【问题讨论】：

标签： rust webassembly wasm-bindgen

【解决方案1】：

编辑：原来的答案是错误的。你可以导入使用wasm-bindgen定义的东西，它们是合法的ES6。或者至少在 ES6 模块中可以使用相同的概念。他们称他们为default exports/imports。有点尴尬，不过导入的方法是使用js_name = "default"。像这样：

#[wasm_bindgen(module = "web3")]
extern "C" {
    #[wasm_bindgen(js_name = "default")]
    type Web3;

    #[wasm_bindgen(constructor, js_class = "default")]
    fn new(_: &Provider) -> Web3;

    #[wasm_bindgen(static_method_of = Web3, getter, js_class = "default")]
    fn givenProvider() -> Provider;

    type Provider;
}

您需要方法上的js_class 参数，它不记得Web3 的js_name 是default。

旧的错误答案：

你不能让wasm-bindgen 生成这样的代码的原因是因为它不是合法的 ES6。 ECMAScript 模块对所有内容都使用命名导出。 Web3 实际上是一个 CommonJS 模块，那些确实支持具有单个匿名导出。

它几乎起作用的原因是因为我使用的是 webpack，而 webpack 允许您使用 ES6 语法导入 CommonJS 模块，即使语义略有不同。

解决方案是做一个小垫片，从 ES6 模块中导出 CommonJS 模块：

export let Web3 = require('web3');

那么这个绑定就会起作用：

#[wasm_bindgen(module = "/src/web3-wrapper.js")]
extern "C" {
    type Web3;

    #[wasm_bindgen(constructor)]
    fn new(_: &Provider) -> Web3;

    #[wasm_bindgen(static_method_of = Web3, getter)]
    fn givenProvider() -> Provider;

    type Provider;
}

【讨论】：