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

Cara menjalankan aplikasi karat di web

Mary-Kate Olsen
Lepaskan: 2025-01-26 16:32:11
asal
595 orang telah melayarinya

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>
Salin selepas log masuk
Salin selepas log masuk

Seterusnya, buat pakej karat baru:

ini akan menghasilkan struktur folder berikut:

<code class="language-bash">cargo new rust-101 --lib</code>
Salin selepas log masuk

: Fail konfigurasi projek adalah serupa dengan
<code>├── Cargo.toml
└── src
    └── lib.rs</code>
Salin selepas log masuk
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>
Salin selepas log masuk

: 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>
Salin selepas log masuk

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>
Salin selepas log masuk
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>
Salin selepas log masuk
  • <.> 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>
Salin selepas log masuk
<.> 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>
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan