Comment exécuter une application Rust sur le Web-js tutoriel-php.cn

Comment exécuter une application Rust sur le Web

Mary-Kate Olsen

Libérer： 2025-01-26 16:32:11

original

595 Les gens l'ont consulté

How to Run a Rust Application in the Web

Dans ce tutoriel, nous apprendrons comment exécuter une application Rust dans un navigateur Web. Nous allons créer un package Rust simple, le compiler dans WebAssembly (WASM) et l'intégrer dans une page HTML.

1. Installer Rust

Tout d’abord, vous devez installer Rust. Veuillez vous référer au guide d'installation officiel de Rust : Guide d'installation de Rust. Une fois l'installation terminée, exécutez la commande suivante pour vérifier si l'installation a réussi :

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

Copier après la connexion

2. Créer un package Rust

Ensuite, créez un nouveau package Rust :

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

Copier après la connexion

Cela générera la structure de dossiers suivante :

<code>├── Cargo.toml
└── src
    └── lib.rs</code>

Copier après la connexion

Cargo.toml : Fichier de configuration du projet, similaire à package.json en JavaScript.
lib.rs : Le fichier de bibliothèque principal contenant le code Rust.

Ouvrez le fichier lib.rs. Par défaut, il contient un exemple de fonction add. Notre objectif est d'appeler cette fonction depuis l'application web.

3. Compiler Rust vers WebAssembly

Pour exécuter du code Rust sur le Web, vous devez le compiler sur WebAssembly (WASM). Pour cela, installez l'outil wasm-pack :

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

Copier après la connexion

4. Établir la communication entre Rust et JavaScript

Pour connecter Rust et JavaScript, nous utiliserons la wasm-bindgen crate. Le fichier Cargo.toml mis à jour est le suivant :

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

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

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

Copier après la connexion

Ici :

crate-type = ["cdylib"] : Configurez le package pour générer des bibliothèques dynamiques compatibles avec WebAssembly.
wasm-bindgen : Permet la communication entre Rust et JavaScript.

Installer les dépendances :

<code class="language-bash">cargo build</code>

Copier après la connexion

5. Mettre à jour le code Rust

Modifiez le fichier src/lib.rs pour que la fonction add soit accessible depuis JavaScript :

<code class="language-rust">use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}</code>

Copier après la connexion

#[wasm_bindgen] : expose les fonctions add à JavaScript.

Exécutez la commande suivante pour compiler le package Rust dans WebAssembly :

<code class="language-bash">wasm-pack build --target web</code>

Copier après la connexion

Cette commande :

Compilez le code Rust sur WebAssembly.
Générez des liaisons JavaScript pour travailler avec des fichiers WebAssembly.
Créez un répertoire pkg/ contenant les fichiers générés.

6. Utiliser des packages dans les pages Web

Créez un fichier index.html dans le répertoire racine du projet avec le contenu suivant :

<code class="language-html"><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Rust</title>
  </head>
  <body>
    <script type="module">
      import init, { add } from "./pkg/rust_101.js";
      init().then(() => {
        const sum = add(5, 10);
        console.log("5 + 10 =", sum);
      });
    </script>
  </body>
</html></code>

Copier après la connexion

7. Structure finale du projet

Après avoir terminé les étapes ci-dessus, la structure de votre projet devrait ressembler à ceci :

<code>.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_101.d.ts
│   ├── rust_101.js
│   ├── rust_101_bg.wasm
│   └── rust_101_bg.wasm.d.ts
└── src
    └── lib.rs</code>

Copier après la connexion

8. Démarrez la page Web

Pour exécuter une page Web, vous devez utiliser un serveur Web local pour la servir. Vous pouvez utiliser n'importe quel serveur Web de votre choix, tel que l'extension Live Server (VS Code).

Dans la console du navigateur (Ctrl Shift J ou Cmd Option J), vous devriez voir :

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

Copier après la connexion

c'est tout! J'espère que ce tutoriel vous aidera. Veuillez partager vos commentaires ou vos questions à tout moment!

Référence:

compilé de la rouille à webassembly

Veuillez noter que j'ai remplacé une partie du texte d'origine et j'ai rendu des organisations plus claires sur les étapes, mais que j'ai maintenu la signification globale et l'emplacement d'image du texte d'origine. Je n'ai ajouté aucun nouveau contenu ni au centre de la modification du texte d'origine. Veuillez remplacer en fonction de la situation réelle "[https://www.php.cn/link/d185c5ed375363f735f7a15d d24]" "et" https://www.php.cn/link/2677882828099d6bcd49] "le lien correct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!