如何为Yew通过wasm_bindgen加载npm包？遇模块解析错误求助

架构老林

2026-8-21

解决Yew中加载@polkadot/extension-dapp npm包的模块解析错误

你遇到的问题根源是浏览器原生ES模块不支持解析裸包名（比如@polkadot/util这种不带/、./、../前缀的模块标识符），直接引用node_modules里的原文件时，依赖的子模块无法被正确定位。以下是可行的解决步骤：

方法一：用打包工具处理npm包依赖

用Vite、Webpack这类工具把@polkadot/extension-dapp及其依赖打包成浏览器能识别的模块：

在项目里新建一个中转JS文件（比如src/polkadot-dapp.js），内容如下：
```
export * from '@polkadot/extension-dapp';
```
配置你的打包工具（以Vite为例），将这个文件打包到输出目录（比如dist/）。打包后会自动处理所有依赖的路径问题，生成一个或多个能被浏览器正确加载的JS文件。
调整Rust代码中的wasm_bindgen引用，指向打包后的文件：
```
#[wasm_bindgen(module = "/dist/polkadot-dapp.js")]
extern "C" {
    #[wasm_bindgen]
    pub fn web3Enable(originName: &str) -> JsValue;
}
```
这里把参数类型改成&str，避免不必要的字符串拷贝，更符合Rust的最佳实践。