如何在Rust与WebAssembly中使用NPM包？

不能直接在Rust编译出的WebAssembly代码里调用NPM包——毕竟NPM包属于JavaScript生态，而Wasm运行在独立的虚拟机环境中，无法直接识别JS模块。不过借助你正在使用的wasm_bindgen crate和webpack配置，完全可以通过JavaScript层中转，间接实现Rust/Wasm调用NPM包的功能，具体步骤如下：

• 第一步：安装并在JS侧导入NPM包
  先通过npm安装目标包，比如：

  npm install your-target-npm-package
  

  然后在项目的JS入口文件（比如src/index.js）里导入这个包。

• 第二步：在Rust中声明JS调用接口
  用#[wasm_bindgen]标注外部函数块，声明要从JS侧调用的方法，比如：

  use wasm_bindgen::prelude::*;
  
  #[wasm_bindgen]
  extern "C" {
      // 声明一个由JS侧实现的函数，用于调用NPM包功能
      fn invoke_npm_package(arg: &str) -> String;
  }
  
  #[wasm_bindgen]
  pub fn rust_use_npm(arg: &str) -> String {
      // 在Rust函数里调用声明的JS函数，间接使用NPM包
      invoke_npm_package(arg)
  }
  

• 第三步：在JS侧实现暴露给Rust的函数
  在JS文件里实现刚才声明的invoke_npm_package函数，内部调用NPM包的API，同时把函数挂载到全局对象（比如window）让Wasm能访问到：

  import * as targetPackage from 'your-target-npm-package';
  
  // 暴露给Wasm的全局函数
  window.invoke_npm_package = function(arg) {
      // 调用NPM包的具体方法
      return targetPackage.someFunction(arg);
  };
  
  // 导入并初始化Wasm模块
  import('./index').catch(err => console.error('加载Wasm模块失败:', err));
  

• 第四步：借助现有模板配置完成打包
  你使用的rust-webpack-template已经配置好了@wasm-tool/wasm-pack-plugin，会自动处理wasm_bindgen生成的绑定代码，不需要额外修改webpack配置，直接按常规流程打包运行即可。

另外，如果是想在NPM包的JS代码里调用Rust/Wasm的功能，直接调用wasm_bindgen导出的Rust函数就行，这也是该模板默认支持的场景。

内容的提问来源于stack exchange，提问作者Javed