rust 在VSCode Web扩展中加载wasm

fv2wmkja  于 2023-01-09  发布在  Vscode
关注(0)|答案(3)|浏览(230)

我正在尝试加载一个带有VSCode Web扩展的wasm模块。
我从the "lsp-web-extension-sample"开始,在服务器目录中,我用wasm-bindgen创建了一个简单的rust库,它成功地用wasm-pack编译,当我从rust pkg输出调用init函数时,它基本上是这样做的:

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

出现以下错误:* * "TypeError: failed to fetch"**,没有更多解释。使用@vscode/test-web以及vsce package版本测试时发生此错误。
知道该怎么做吗?有没有vscode的wasm web扩展的例子?

ttcibm8c

ttcibm8c1#

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

  • 网络包配置js*
module: {
    rules: [
      // ...,
      {
        test: /\.wasm$/,
        type: "asset/inline",
      },
    ],
  },
hgqdbh6s

hgqdbh6s2#

可接受的解决方案对我不起作用(由wasm-pack生成的WASM),但这个解决方案起作用了:
https://github.com/SonOfLilit/vscode-web-wasm-rust
它涉及到编写一个webpack WASM Loader插件(并修补webpack以使其成为可能,PR提交)来使用此加载程序:

/******/    /* 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)));
/******/        };
/******/    })();

以及在尝试导入WASM之前在activate中设置__webpack_public_path__

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);
}
lxkprmvk

lxkprmvk3#

我也花了很长时间才弄明白这一点(正如您可以在下面的注解中看到的),这是我在activate方法中得到的代码。

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)
    );

相关问题