為 WebAssembly 構建-Python教學-PHP中文網

Building for WebAssembly

我目前正在為 Memphis（我的 Rust 中的 Python 解釋器）探索兩個有趣的主題：建立 WebAssembly 和嵌入 CPython。由於本週沒有重大里程碑要報告，我想分享一些正在進行的想法。對我來說，孟菲斯是一個透過實際實驗來擴展我的概念理解的項目 - 希望這篇文章可以為您做同樣的事情，因為我們正在探索我正在探索的一些設計決策。

瀏覽器中的 Python

將 Memphis 編譯為 WebAssembly 目標已經在我腦海中浮現了一段時間，兩個星期六前，我終於嘗試了一下。在杯墊上放了一杯溫熱的滴濾咖啡，我掰響指關節開始了。

WebAssembly 是現代 Web 瀏覽器內的沙盒執行環境，它補充了傳統的 JavaScript 環境。 Wasm 環境更接近本機程式碼，可用於受益於更高效能的 CPU 上下文的任務；想想數字運算或愚蠢的繁忙迴圈。我對它的興趣不是從性能的角度來看，而是因為它完全是可能的。 Rust 的賣點之一（實際上有無數賣點）是它可以針對 Wasm。有人可能會問，怎麼辦？這是可能的，因為 Rust 使用 LLVM 作為其編譯器後端。 Rust 編譯器前端會產生 LLVM 中間表示 (IR) 程式碼，LLVM 可以將其編譯為數十個目標的本機程式碼。

這是一個相當巨大的好處，我很好奇它是否只適用於孟菲斯。我之前對在瀏覽器中運行 Python 的想法幾乎為零，所以這似乎是測試 Wasm 學習曲線的絕佳機會。

設定 wasm-pack 並建置 WebAssembly

我啟動了人工智慧助理並詢問啟動順序。發出嘟嘟嘟嘟嘟的聲音。以下是我一路上學到的註解的步驟。

# wasm-pack helps compile our Rust code to WebAssembly and bundle it
# with JavaScript bindings we can call from our HTML/JavaScript page.
cargo install wasm-pack

# wasm-pack also downloads the wasm32-unknown-unknown target via
# rustup for us. If for whatever reason it does not, you can use this: 
# rustup target add wasm32-unknown-unknown
# We must specify a feature flag because our wasm_bindgen interface is
# behind the wasm feature flag.
wasm-pack build --target web --out-dir wasm_ui/pkg -- --features wasm

登入後複製

我第一次嘗試就建造成功了！然而，因為我們沒有將 Rust 二進位檔案中的任何函數標記為可從 WebAssembly 調用，所以它沒有做太多事情。

我們可以安裝 wasm-bindgen 箱來執行此操作，我將其放在功能標誌後面。我將其添加到我的 Cargo.toml 中。

[dependencies]
wasm-bindgen = { version = "0.2", optional = true }

[features]
wasm = ["wasm-bindgen"]

登入後複製

這是我加入 src/lib.rs 檔案中的一小段程式碼，位於 wasm 功能標誌後面。 greet 函數以 #[wasm_bindgen] 修飾，使該符號在 JavaScript 中可用。

# wasm-pack helps compile our Rust code to WebAssembly and bundle it
# with JavaScript bindings we can call from our HTML/JavaScript page.
cargo install wasm-pack

# wasm-pack also downloads the wasm32-unknown-unknown target via
# rustup for us. If for whatever reason it does not, you can use this: 
# rustup target add wasm32-unknown-unknown
# We must specify a feature flag because our wasm_bindgen interface is
# behind the wasm feature flag.
wasm-pack build --target web --out-dir wasm_ui/pkg -- --features wasm

登入後複製

建立 JavaScript 介面

我還向我的人工智慧助理詢問了我可以用來測試我的 Wasm 介面的盡可能小的 JavaScript 片段。當我們呼叫 init() 時，瀏覽器會載入 .wasm 文件，執行 JIT 編譯步驟以將可移植的 WebAssembly 二進位檔案轉換為本機程式碼，並初始化 WebAssembly 執行時期的記憶體。

[dependencies]
wasm-bindgen = { version = "0.2", optional = true }

[features]
wasm = ["wasm-bindgen"]

登入後複製

就像奇蹟中的奇蹟一樣，它確實有效。誠然，我沒有在瀏覽器中運行任何 Python 程式碼，但與我的二進位檔案互動是一個巨大的步驟，年輕人不能低估它的價值。

下一步是給它一個用 JavaScript 定義的 Python 表達式，並讓 Wasm 二進位處理數字。正如我在 REPL 文章中提到的，軟體專案中的每個入口點都是改進我的抽象的機會，這裡肯定會再次出現這種情況。當我翻閱我的 Memphis 儲存庫時，我意識到哇，我真的應該有一個更好的介面來傳遞字串並將其作為 Python 進行評估。 就像我說的，我喜歡新的入口點。

目前，我會使用我的交叉檢查適配器。 Crosscheck 是我正在進行的測試框架，用於驗證 Treewalk 解釋器和字節碼 VM 對於給定的 Python 輸入產生相同的行為。它以空服員所做的事情命名。

這是我更新的 Rust 程式碼。

#[cfg(feature = "wasm")]
mod wasm {
    use wasm_bindgen::prelude::wasm_bindgen;

    // Export a function to JavaScript
    #[wasm_bindgen]
    pub fn greet() -> String {
        "Hello from WebAssembly!".to_string()
    }
}

登入後複製

這是我更新的 JavaScript 程式碼，它呼叫新的 Rust 評估函數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wasm Test</title>
</head>
<body>
    <script type="module">
        import init, { greet } from './pkg/memphis.js';

        async function run() {
            await init();
            console.log(greet());
        }

        run();
    </script>
</body>
</html>

登入後複製

偵錯 WebAssembly 錯誤

現在，當我運行它時，我得到了…控制台錯誤。它因未實現的錯誤而崩潰。

我查了一下，並不清楚是什麼原因造成的。您可以單擊原始程式碼，但對於 Wasm 建置來說，它只是一個彙編區塊，沒有引用原始 Rust 函數。

我進行了一些人工智慧聊天/谷歌搜索，發現了兩種有用的方法。一種是用於 Wasm 建置的 console_log，它在瀏覽器控制台中顯示來自 Rust 程式碼的日誌語句。這對一些人有幫助，但我真正想要的是堆疊追蹤。輸入console_error_panic_hook。它立即給了我 Rust 堆疊跟踪，即 CLUTCH。如果您正在建立自己的 Wasm，請立即停止閱讀並添加此箱子。我甚至不介意你永遠讀不完這篇文章。費里斯希望你使用這個箱子？以下是我將其添加到我的 Wasm 介面的方法。

#[cfg(feature = "wasm")]
mod wasm {
    use wasm_bindgen::prelude::wasm_bindgen;

    use crosscheck::{InterpreterTest, TreewalkAdapter};

    // Export a function to JavaScript
    #[wasm_bindgen]
    pub fn greet() -> String {
        "Hello from WebAssembly!".to_string()
    }

    #[wasm_bindgen]
    pub fn evaluate(code: String) -> String {
        let result = TreewalkAdapter.execute(&code);
        format!("{}", result)
    }
}

登入後複製

我的堆疊追蹤指出了罪魁禍首：我使用 std::env 來請求一些作業系統資源，這在 Wasm 運行時（即沙盒部分）中是不允許的。我將這些呼叫放在功能標誌後面（它們與我如何隨意確定 Python 標準庫在主機上的位置有關）並再次啟動我的建置。在與正確顯示我的返回類型相關的一些小失敗之後......

它成功了。這是我現在在瀏覽器控制台中看到的內容。

# wasm-pack helps compile our Rust code to WebAssembly and bundle it
# with JavaScript bindings we can call from our HTML/JavaScript page.
cargo install wasm-pack

# wasm-pack also downloads the wasm32-unknown-unknown target via
# rustup for us. If for whatever reason it does not, you can use this: 
# rustup target add wasm32-unknown-unknown
# We must specify a feature flag because our wasm_bindgen interface is
# behind the wasm feature flag.
wasm-pack build --target web --out-dir wasm_ui/pkg -- --features wasm

登入後複製

tldr 我可以在瀏覽器中執行Python。（值得讚揚的是，RustPython 也這樣做了：https://rustpython.github.io/demo/。我沒有深入研究他們的項目，但它似乎很全面。）Python 列表理解是在JavaScript 中以字符串形式定義的，回應清單由編譯為Wasm 的Rust 程式碼評估，並轉換回可由JavaScript 顯示的字串。

此設定目前僅支援表達式。為了評估語句（並稍後讀回其結果），我需要在 Rust 端保留狀態。我也夢想建立一個 JavaScript REPL。這聽起來像是未來的我的一個問題（而且是一個無聊的夢）。