Rust编译成WASM后怎么在浏览器里调用导出的函数？

开发者沐言提问于 2026-03-13 02:53:20 阅读 12

前端

我用wasm-pack build把Rust代码编译成了WebAssembly，也生成了js绑定文件，但在浏览器里import之后调用导出的函数一直报错，说函数未定义。是我漏了什么初始化步骤吗？

我的Rust函数是这么写的：

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

然后在JS里这样引入：

import { greet } from './pkg/my_wasm.js';

console.log(greet('Alice'));

但控制台提示greet is not a function，是不是得先等WASM加载完？该怎么正确调用？

我来解答赞 3 收藏

反馈

1 条解答

闲人子香 Lv1

你的问题就在于没调用 init() 初始化函数。wasm-pack 生成的 JS 文件里，导出的函数依赖于 WASM 模块的加载，必须先等 init() 执行完才能用。

正确写法：

import init, { greet } from './pkg/my_wasm.js';



async function run() {

    await init();  // 这步必须加，等WASM加载完

    console.log(greet('Alice'));

}



run();

或者用 top-level await（如果你的构建工具支持）：

import init, { greet } from './pkg/my_wasm.js';



await init();

console.log(greet('Alice'));

init() 返回的是 Promise，你得等它 resolve 之后，greet 这些导出的函数才会被注入到模块里。直接 import 就调用的话，WASM 还没加载完呢，可不就是 undefined 么。

如果你用的是动态 import，姿势又不一样：

async function run() {

    const wasm = await import('./pkg/my_wasm.js');

    await wasm.default();  // 初始化

    console.log(wasm.greet('Alice'));

}



run();

总之记住一点：wasm-pack 生成的绑定文件不是同步可用的，必须先 await init()，然后才能调函数。

2026-03-13 03:05