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
Freigeben: 2025-01-26 16:32:11
Original
631 Leute haben es durchsucht

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>
Nach dem Login kopieren
Nach dem Login kopieren

Erstellen Sie als nächstes ein neues Rostpaket:

Dies erzeugt die folgende Ordnerstruktur:

<code class="language-bash">cargo new rust-101 --lib</code>
Nach dem Login kopieren

: Die Konfigurationsdatei des Projekts ähnelt
<code>├── Cargo.toml
└── src
    └── lib.rs</code>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren

<.> 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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
    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>
Nach dem Login kopieren
-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>
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage