Dans cet article, nous décrirons ce qu'il faut faire pour créer votre premier code WebAssemly.

Supposons que vous ayez déjà entendu parler de WebAssembly, mais que vous n'ayez toujours pas écrit votre premier code avec cette technologie.

Pour l'instant, nous allons faire un pack de démarrage simple. J'ai choisi la combinaison avec le langage de programmation Rust car c'est attractif.

Sans plus tarder, faisons-le.

Installer Rust et Cargo

Rust : langage de programmation multi-paradigmes, de haut niveau et à usage général (https://www.rust-lang.org/)
Cargo : l'outil de compilation Rust et le gestionnaire de paquets (https://crates.io/)

Fichier Init Cargo.toml

cargo init --name rust_wasm_starter --lib
# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]

cargo add wasm-bindgen

# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "0.2.84"

cargo install wasm-pack

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

use wasm_bindgen::prelude::wasm_bindgen;

#[wasm_bindgen]
pub fn add(a: usize, b: usize) -> usize {
    return a + b
}

wasm-pack build --release --target web

npm init
// package.json

{
  "name": "rust-wasm-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC"
}

npm i http-server --save

"scripts": {
  "start": "http-server -a localhost -p 5200",
  "build": "wasm-pack build --release --target web"
}

import init from "./pkg/rust_wasm_starter.js";
import {add} from "../pkg/rust_wasm_starter.js";

function run() {
    console.log(add(5, 5));
}

init().then(run)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Rust Wasm Starter</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    See the result in the console.
</body>
</html>

npm run start
Starting up http-server, serving ./

http-server version: 14.1.1
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://localhost:5200
Hit CTRL-C to stop the server

      

Si vous rencontrez des difficultés pour faire fonctionner le projet, essayez de consulter mon référentiel GitHub