Rumah >hujung hadapan web >tutorial js >Cara menjalankan aplikasi karat di web

Cara menjalankan aplikasi karat di web

Mary-Kate Olsen
Mary-Kate Olsenasal
2025-01-26 16:32:11634semak imbas

How to Run a Rust Application in the Web

Dalam tutorial ini, kami akan belajar bagaimana untuk menjalankan aplikasi Rust dalam pelayar web. Kami akan membuat pakej karat yang mudah, menyusunnya ke WebAssembly (WASM), dan mengintegrasikannya ke halaman HTML.

<.> 1. Pasang karat

Pertama sekali, anda perlu memasang karat. Sila rujuk panduan pemasangan rasmi Rust:

Panduan Pemasangan Rust

. Selepas pemasangan selesai, jalankan arahan berikut untuk mengesahkan sama ada pemasangan berjaya:

<.> 2. Buat beg karat
<code class="language-bash">rustc --version</code>

Seterusnya, buat pakej karat baru:

ini akan menghasilkan struktur folder berikut:

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

: Fail konfigurasi projek adalah serupa dengan
<code>├── Cargo.toml
└── src
    └── lib.rs</code>
dalam JavaScript.
  • : Fail perpustakaan utama yang mengandungi kod karat. Cargo.toml package.json
  • Buka fail . Secara lalai, ia mengandungi fungsi
  • contoh. Matlamat kami adalah untuk memanggil fungsi ini dari aplikasi web. lib.rs
  • <.> 3. Menyusun karat ke dalam webassembly

lib.rs Untuk menjalankan kod karat di web, anda perlu menyusunnya ke WebAssembly (WASM). Untuk ini, pasang alat: add

3

Untuk menghubungkan karat dan javascript, kami akan menggunakan peti . Kemas kini Fail adalah seperti berikut:

di sini: wasm-pack

: Konfigurasikan perpustakaan dinamik yang serasi dengan webassembly.
<code class="language-bash">cargo install wasm-pack</code>

: Dayakan komunikasi antara karat dan javascript.

Ketergantungan pemasangan:

wasm-bindgen Cargo.toml <.> 5. Kemas kini kod karat

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

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

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

edit fail, supaya fungsi

boleh diakses dari JavaScript:
  • crate-type = ["cdylib"]
  • : dedahkan
  • fungsi ke JavaScript. wasm-bindgen
jalankan arahan berikut untuk menyusun pakej karat ke webassembly:

<code class="language-bash">cargo build</code>
Perintah ini akan:

menyusun kod karat ke webassembly.

JavaScript mengikat untuk mengendalikan fail webassembly. src/lib.rs add Buat direktori

yang mengandungi fail yang dihasilkan.
<code class="language-rust">use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}</code>
  • <.> 6. Gunakan beg di laman web #[wasm_bindgen] add
  • Buat fail
dalam direktori root projek, kandungannya adalah seperti berikut:

<code class="language-bash">wasm-pack build --target web</code>
<.> 7. Struktur Projek Akhir

    Selepas langkah -langkah di atas selesai, struktur projek anda harus ditunjukkan di bawah:
  • <.> 8. Mulakan laman web
  • pkg/ Untuk menjalankan laman web, anda perlu menggunakan pelayan web tempatan untuk menyediakan perkhidmatan. Anda boleh menggunakan mana -mana pelayan web yang anda suka, seperti Sambungan Pelayan Live (VS Code).
Dalam konsol penyemak imbas (CTRL Shift J atau CMD Option J), anda harus melihat:

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

itu sahaja! Saya harap tutorial ini dapat membantu anda. Sila kongsi maklum balas atau soalan anda pada bila -bila masa!

rujukan:

disusun dari karat ke webassembly
  • Sila ambil perhatian bahawa saya menggantikan beberapa teks asal dan membuat organisasi yang lebih jelas pada langkah -langkah, tetapi mengekalkan makna keseluruhan dan lokasi gambar teks asal. Saya tidak menambah sebarang kandungan baru atau tumpuan menukar teks asal. Sila ganti mengikut situasi sebenar "[https://www.php.cn/link/d185c5ed375363f735f7a15d d24]" "dan" https://www.php.cn/link/267782809d.

Atas ialah kandungan terperinci Cara menjalankan aplikasi karat di web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn