在VSCODE WEB扩展中加载WASM

Question

我正在尝试使用VSCODE Web扩展名加载WASM模块。

我从 - 样本“ 。 在服务器目录中，我使用wasm-bindgen创建了一个简单的Rust Lib，它使用wasm-pack成功编译。当我从Rust PKG输出中调用init函数时，它基本上会这样做：

input = new URL("my-ext.wasm", import.meta.url)
fetch(input)

我会收到以下错误： “ typeError：typeError：dobine for fet fide” ，没有更多解释。 当使用@vscode/test-web进行测试以及使用VSCE软件包版本测试时，会发生此错误。

知道该怎么办？ VSCODE的WASM Web扩展程序是否有任何示例？

Answer 1

我能够通过加载WASM内联完成工作。

webpack.config.js

  module: {
    rules: [
      // ...,
      {
        test: /\.wasm$/,
        type: "asset/inline",
      },
    ],
  },

Answer 2

接受的解决方案对我不起作用（WASM由WASM-PACK），但这确实：

https://github.com/sonoflilit/vscode-web-wasm-rust

它涉及编写webpack webpack wasm loader plugin（和修补webpack要使之成为可能，提交）使用此加载程序：

/******/    /* webpack/runtime/wasm loading */
/******/    (() => {
/******/        __webpack_require__.v = (exports, wasmModuleId, wasmModuleHash, importsObj) => {
/******/            var vscode = require('vscode');
/******/            var wasmPath = __webpack_require__.p + wasmModuleHash + '.module.wasm';
/******/            var req = vscode.workspace.fs.readFile(vscode.Uri.file(wasmPath));;
/******/            return req
/******/                .then((bytes) => (WebAssembly.instantiate(bytes, importsObj)))
/******/                .then((res) => (Object.assign(exports, res.instance.exports)));
/******/        };
/******/    })();

以及webpack_public_path __ in activate> activate之前，请先尝试导入wasm：

export function activate(context: vscode.ExtensionContext) {
  __webpack_public_path__ =
    context.extensionUri.toString().replace("file:///", "") + "/dist/web/";

  let disposable = vscode.commands.registerCommand(
    "vscode-rust-web.helloWorld",
    () => {
      require("rust-wasm").then((rust: any) => {
        vscode.window.showInformationMessage(rust.greet());
      });
    }
  );

  context.subscriptions.push(disposable);
}

Answer 3

我也花了很长时间才弄清楚这一点（正如您在下面的评论中看到的）。这是我在激活方法中最终提出的代码。

export function activate(context: vscode.ExtensionContext) {

    // These few lines took a looooooong while to figure out.
    // fetch is patched by VS Code, but WebAssembly.instantiateStreaming isn't, so call fetch
    // directly and pass the Response to the wasm-pack init function.
    //
    // Some of this approach copied from:
    //   https://github.com/microsoft/vscode-anycode/blob/anycode.v0.0.70/anycode/client/src/common/client.ts#L114

    let wasmUri = vscode.Uri.joinPath(context.extensionUri, "./dist/bqm_wasm_bg.wasm");
    // Will be something like "file:///Users/billti/src/bqm/dist/hello_wasm_bg.wasm" running in VSCode.
    // Something like "http://localhost:3000/static/devextensions/dist/hello_wasm_bg.wasm" with npx @vscode/test-web

    let fixedUri = 'importScripts' in globalThis ? wasmUri.toString() : wasmUri.fsPath;
    let ready = fetch(fixedUri).then(
        response => init(response)
    );