Heim >Web-Frontend >js-Tutorial >So führen Sie eine Rust-Anwendung im Web aus

So führen Sie eine Rust-Anwendung im Web aus

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-26 16:32:11607Durchsuche

How to Run a Rust Application in the Web

In diesem Tutorial lernen wir, wie Sie die Rust -Anwendung im Webbrowser ausführen. Wir erstellen ein einfaches Rostpaket, kompilieren Sie es zu WebAssembly (WASM) und integrieren Sie es in eine HTML -Seite.

<.> 1. Installieren Sie Rost

Zunächst müssen Sie Rost installieren. Weitere Informationen finden Sie in der offiziellen Installationshandbuch von Rust:

Rust Installationshandbuch

. Führen Sie nach Abschluss der Installation den folgenden Befehl aus, um zu überprüfen, ob die Installation erfolgreich ist:

<.> 2. Erstellen Sie eine Rostbeutel
<code class="language-bash">rustc --version</code>

Erstellen Sie als nächstes ein neues Rostpaket:

Dies erzeugt die folgende Ordnerstruktur:

<code class="language-bash">cargo new rust-101 --lib</code>

: Die Konfigurationsdatei des Projekts ähnelt
<code>├── Cargo.toml
└── src
    └── lib.rs</code>
in JavaScript.
  • : Die Hauptbibliotheksdatei mit dem Rostcode. Cargo.toml package.json
  • Öffnen Sie die Datei . Standardmäßig enthält es eine Beispiel für
  • . Unser Ziel ist es, diese Funktion von einer Webanwendung aus aufzurufen. lib.rs
  • <.> 3. Kompilieren Sie Rost in WebAssembly

lib.rs Um den Rust -Code im Web auszuführen, müssen Sie ihn für WebAssembly (WASM) kompilieren. Installieren Sie dazu Tools: add

<.> 4. Kommunikation zwischen Rost und JavaScript erstellen

Um Rost und JavaScript zu verbinden, werden wir

Kiste verwenden. Aktualisieren Sie Die Datei lautet wie folgt: wasm-pack

<code class="language-bash">cargo install wasm-pack</code>
hier:

: Konfigurieren Sie die dynamische Bibliothek, die mit WebAssembly kompatibel ist.

: Kommunikation zwischen Rost und JavaScript aktivieren.

wasm-bindgen Cargo.toml Installationsabhängigkeiten:

<code class="language-toml">[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"</code>

<.> 5. Aktualisieren Sie den Rostcode

  • Datei bearbeiten , damit auf die Funktion crate-type = ["cdylib"] über JavaScript zugegriffen werden kann:
  • wasm-bindgen
  • : Funktion
der Funktion für JavaScript aussetzen.

<code class="language-bash">cargo build</code>
Führen Sie die folgenden Befehle aus, um das Rostpaket für WebAssembly zu kompilieren:

Dieser Befehl wird:

src/lib.rs Kompilieren Sie den Rostcode in WebAssembly. add

JavaScript -Bindung zum Umgang mit der WebAssembly -Datei.
<code class="language-rust">use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}</code>
    Erstellen Sie ein
  • -Verzeichnung, das die generierte Datei enthält. #[wasm_bindgen] add
  • <.> 6. Verwenden Sie Taschen auf der Webseite

Erstellen Sie eine
<code class="language-bash">wasm-pack build --target web</code>
-Datei im Stammverzeichnis des Projekts, der Inhalt lautet wie folgt:

    <.> 7. Die endgültige Projektstruktur
  • Nach Abschluss der obigen Schritte sollte Ihre Projektstruktur unten angezeigt werden:
  • pkg/ <.> 8. Starten Sie die Webseite

Um die Webseite auszuführen, müssen Sie einen lokalen Webserver verwenden, um Dienste bereitzustellen. Sie können jeden Webserver verwenden, den Sie mögen, z. B. Live Server -Erweiterung (VS -Code). In der Browserkonsole (Strg -Verschiebung J oder CMD -Option J) sollten Sie:

sehen
<code class="language-bash">rustc --version</code>

Das ist es! Ich hoffe, dieses Tutorial wird Ihnen helfen. Bitte teilen Sie Ihr Feedback oder Ihre Fragen jederzeit mit!

Referenz:

    kompiliert von Rost zu WebAssembly
  • Bitte beachten Sie, dass ich einige der Originaltext ersetzt und in den Schritten klarere Organisationen gemacht habe, aber die Gesamtbedeutung und den Bildort des Originaltextes beibehalten habe. Ich habe weder neue Inhalte noch den Fokus der Änderung des Originaltextes hinzugefügt. Bitte ersetzen Sie gemäß der tatsächlichen Situation "[https://www.php.cn/link/d185c5ed375363f735f7a15d D24]" "und" https://www.php.cn/link/26778828280999d6bcd49].

Das obige ist der detaillierte Inhalt vonSo führen Sie eine Rust-Anwendung im Web aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn