标签: wasm-pack

当我cargo install wasm-pack在 Windows 10 64 位上运行时，出现此错误：

error: failed to run custom build command for `openssl-sys v0.9.65`\n\nCaused by:\n  process didn't exit successfully: `C:\\Users\\vilgo\\AppData\\Local\\Temp\\cargo-install2J8ZNz\\release\\build\\openssl-sys-932395a164949059\\build-script-main` (exit code: 101)\n  --- stdout\n  cargo:rustc-cfg=const_fn\n  cargo:rerun-if-env-changed=X86_64_PC_WINDOWS_MSVC_OPENSSL_NO_VENDOR\n  X86_64_PC_WINDOWS_MSVC_OPENSSL_NO_VENDOR unset\n  cargo:rerun-if-env-changed=OPENSSL_NO_VENDOR\n  OPENSSL_NO_VENDOR unset\n  openssl-src: Enable the assembly language routines in building OpenSSL.\n  running "perl" "./Configure" "--prefix=C:\\\\Users\\\\vilgo\\\\AppData\\\\Local\\\\Temp\\\\cargo-install2J8ZNz\\\\release\\\\build\\\\openssl-sys-a51d272dcebf1fc5\\\\out\\\\openssl-build\\\\install" "no-dso" "no-shared" "no-ssl3" "no-unit-test" "no-comp" "no-zlib" "no-zlib-dynamic" "no-md2" "no-rc5" "no-weak-ssl-ciphers" "no-camellia" "no-idea" "no-seed" "no-engine" "VC-WIN64A"\n\n  --- stderr\n  thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Os { …

我正在为康威的生命游戏学习 Rust WASM 教程。

调用文件中最简单的函数之一Universe.render（它用于渲染表示游戏状态的字符串）。当我运行时它会导致错误wasm-pack build：

Fatal: error in validating input
Error: failed to execute `wasm-opt`: exited with exit code: 1
  full command: "/home/vaer/.cache/.wasm-pack/wasm-opt-4d7a65327e9363b7/wasm-opt" "/home/vaer/src/learn-rust/wasm-game-of-life/pkg/wasm_game_of_life_bg.wasm" "-o" "/home/vaer/src/learn-rust/wasm-game-of-life/pkg/wasm_game_of_life_bg.wasm-opt.wasm" "-O"
To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`.

如果我删除该函数，则代码构建时不会出错。如果我用以下函数替换它，构建将失败并出现相同的错误：

pub fn wtf() -> String {
    String::from("wtf")
}

似乎任何返回 a 的函数都会String导致此错误。为什么？

以下是我的全部代码：

mod utils;

use wasm_bindgen::prelude::*;

// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// …

我遵循wasm-bindgen的Hello World 指南（我正在使用）。wasm-bindgen = "0.2.72"

不幸的是，指南中提到的 npm 包并不是最新的。因为我想有一个干净的起点，所以我尝试升级它们。

这是package.json指南中提到的：

{
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "1.0.1",
    "text-encoding": "^0.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0"
  }
}

我删除了text-encoding（因为我不关心不支持非基于 Chromium 的Edge版本）并升级，@wasm-tool/wasm-pack-plugin没有出现问题：

在职的package.json：

{
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.3.3",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0"
  }
}

在职的webpack.config.js：

const path = …

我有一些 Rust 代码，可以使用wasm-pack和编译为 Web 程序集wasm-bindgen。我想从网络工作集/工作人员调用此代码。整个应用程序最终应该只是一个 *.js 文件，其他所有内容都内联。

这就是我想象的构建过程：

1. 用于wasm-pack将 Rust 代码编译为 *.wasm 和 *.js 绑定（此步骤效果很好）
2. 用于webpack构建一个独立的 *.js 文件，我可以将其作为工作集/工作线程加载。*.wasm 必须包含在此文件中。（这一步失败）
3. 再次使用webpack来构建我的最终应用程序/包，内联步骤 2 中的工作集/工作文件。（此步骤效果很好）

我的问题出在步骤 2 中：我无法将webpack*.wasm 内联到 worklet/worker 文件中。我在我的 webpack 配置中尝试了这个：

entry: {
    worker: {
        import: './src/worker.ts',
        filename: '../lib/worker.js',
    }
},

// ...

module: {
    rules: [
    
        // ...

        {
            test: /\.wasm$/,
            // 1st option: type: 'webassembly/sync',
            // 2nd option: type: 'asset/inline',
        },

        // ...

    ],
},

无论我做什么，webpack …

我有一个像这样的 Rust + wasm 项目：

wasm-pack-example/
  pkg/
    .gitignore
    package.json
    wasm_pack_example.d.ts
    wasm_pack_example.js
    wasm_pack_example_bg.d.ts
    wasm_pack_example_bg.js
    wasm_pack_example_bg.wasm
  src/
    lib.rs
  Cargo.toml

pkg当我运行时，会构建wasm-pack build.

发出的 js 文件不是公共 rust 函数的简单传递 - wasm-pack 向它们添加了一些逻辑。它看起来很像公共 Rust 函数的内存管理包装器。

在我的项目中，我现在真正想做的是针对发出的 wasm 的 js 接口编写自动化测试。这就是我的应用程序所做的，这就是我需要测试的。我很高兴使用任何测试框架（我已经用玩笑做了很多这样的实验）。

我已经尝试了许多指南和工具来做到这一点，包括https://github.com/DrSensor/rs-jest，它很有前途，但缺乏测试 wasm-pack 生成的特定 js 接口的能力。另外，它似乎缺少我的特定库所需的东西，也许是我使用 wasm_bindgen 的特定方式。当根据 rs-jest 实例化 WebAssembly 时，我会看到TypeError: WebAssembly.instantiate(): Imports argument must be present and must be an object，如果我将一个空对象传递给实例化，我会看到TypeError: WebAssembly.instantiate(): Import #0 module="__wbindgen_placeholder__" error: module is not an object or function。

我还尝试了一段时间来模拟浏览器使用 JsDom 获取和实例化 …

我提供一个静态文件服务器（通过 HTTP），其中包含由wasm-pack. 使用 rustwasm 书中的示例，我将此代码添加到我的索引 HTML 页面：

        <script type="module">
            import init from "./pkg/fstree_web.js";

            async function run() {
                await init();
            }

            run();
        </script>

但是，在 Firefox 上，我收到标题中所示的错误消息：

来自“ http://localhost:8000/pkg/fstree_web_bg.wasm ”的模块由于不允许的 MIME 类型（“application/wasm”）而被阻止。

我怀疑是 HTTPS 问题或 localhost 问题，所以我另外尝试了127.0.0.1，甚至尝试了 https://***.ngrok.io 隧道，但 Firefox 仍然拒绝加载带有此错误消息的 wasm 模块。

它链接到关于 X-Content-Type-Options 的 MDN 文章，但我不确定它是如何相关的。我的服务器已经在发送Content-Type: application/wasm.

wasm-pack 生成的 JavaScript 代码是这样开头的：

import { __cargo_web_snippet_72fc447820458c720c68d0d8e078ede631edd723 } from './snippets/stdweb-bb142200b065bd55/inline133.js';
import { __cargo_web_snippet_97495987af1720d8a9a923fa4683a7b683e3acd6 } from './snippets/stdweb-bb142200b065bd55/inline134.js';
import { __cargo_web_snippet_dc2fd915bd92f9e9c6a3bd15174f1414eee3dbaf } from './snippets/stdweb-bb142200b065bd55/inline135.js';
import { __cargo_web_snippet_1c30acb32a1994a07c75e804ae9855b43f191d63 } from …

构建 wasm 使用的一些示例cargo build（如《WebAssembly 编程》一书中的示例）

cargo build --release --target=wasm32-unknown-unknown

还有其他人使用，

wasm-pack build --target web ....

这两种构建项目的方法有什么不同？

我正在尝试将示例代码从 Rust 编译为 wasm。这是一个 Rust 箱，可让您创建/写入 Excel 文件。我已经成功地使用它来运行它cargo run。

不幸的是，当我尝试将其编译为 Web 程序集时，遇到一个错误，该错误指出在编译bzip2-sys<stdlib.h> （一个 Rust 箱子）时找不到该库（一个常见的 C 库）。

当我第一次尝试编译它时，它提示我安装 clang，我从这里安装了 clang （为 Windows（64 位和 32 位）预构建的二进制文件），并且我已将其包含C:\Program Files\LLVM\bin到系统 Path 环境变量中。我还安装了 MinGW-w64，以及带有 Visual C++ 构建工具的 Visual Studio 2017。

您可以在下面看到 Visual Studio Code 中生成的整个错误。

PS C:\Users\User\Desktop\excel-test> wasm-pack build
[INFO]: Checking for the Wasm target...
[INFO]: Compiling to Wasm...
   Compiling libc v0.2.71
   Compiling pkg-config v0.3.17
   Compiling cc v1.0.54
   Compiling crc32fast v1.2.0
   Compiling cfg-if v0.1.10
   Compiling adler32 …

我有一个 Rust 库，我正在尝试交叉编译并打包到 npm 脚本中。我一直在关注wasm包的使用过程。该过程构建了 es6 js，我编写了一些粗略的测试，然后决定尝试使用 jest 作为测试运行程序，因为我在另一个项目中使用它，没有什么问题。

我在尝试运行测试时遇到这个问题

    /Users/nsh/WebstormProjects/wasm-ed25519ph/pkg/index_bg.wasm:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){


    SyntaxError: Invalid or unexpected token

    > 1 | import * as wasm from './index_bg.wasm';

我运行笑话

jest --config ./jest.config.json --detectOpenHandles --debug

笑话调试配置输出

{
  "configs": [
    {
      "automock": false,
      "browser": false,
      "cache": true,
      "cacheDirectory": "/var/folders/w1/hmxby_9x2h18qmm4fbgq3x1m0000gn/T/jest_dx",
      "clearMocks": false,
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "detectLeaks": false,
      "detectOpenHandles": true,
      "errorOnDeprecated": false,
      "filter": null,
      "forceCoverageMatch": [],
      "globals": {
        "NODE_ENV": "test"
      },
      "haste": {
        "providesModuleNodeModules": []
      },
      "moduleDirectories": [
        "node_modules",
        "pkg"
      ],
      "moduleFileExtensions": [
        "js"
      ], …

I'm using wasm_bindgen built with wasm-pack. I have a Rust function I expose to JS:

#[wasm_bindgen]
pub async fn validate_registration_token(backend_api_domain: String, token: String) -> Result<JsValue, JsValue> {

    console::log_1(&"backend_api_domain=".clone().into());
    console::log_1(&backend_api_domain.clone().into());
    console::log_1(&"token=".clone().into());
    console::log_1(&backend_api_domain.clone().into());

    let api_endpoint_get_guest_info = format!(
        "{backend_api_domain}/weddings/{token}/guests/registration/{registration_token}",
        backend_api_domain = backend_api_domain.clone(),
        token = token.clone(),
        registration_token = registration_token.clone()
    );

    console::log_1(&api_endpoint_get_guest_info.clone().into());

    let res = reqwest::Client::new()
        .get(&api_endpoint_get_guest_info)
        .send()
        .await
        .unwrap();

    let text = res.text().await.unwrap();

    let promise = js_sys::Promise::resolve(&true.into());
    let result = wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
    Ok(result)
}

In HTML / JavaScript, I call the Rust function:

<button
    type="button" …