WebAssembly - Convertir WAT en WASM
Dans le chapitre précédent, nous avons vu comment écrire du code en .watc'est-à-dire le format de texte WebAssembly. Le format de texte WebAssembly ne fonctionnera pas directement dans le navigateur et vous devez le convertir en format binaire, c'est-à-dire WASM pour fonctionner dans le navigateur.
WAT à WASM
Convertissons .WAT en .WASM.
Le code que nous allons utiliser est le suivant -
(module
(func $add (param $a i32) (param $b i32) (result i32)
get_local $a
get_local $b
i32.add
)
(export "add" (func $add))
)Maintenant, allez à WebAssembly Studio, disponible sur https://webassembly.studio/.
Vous devriez voir quelque chose comme ça, lorsque vous cliquez sur le lien -
Cliquez sur le projet Empty Wat et cliquez sur le bouton Créer en bas.
Cela vous mènera à un projet vide comme indiqué ci-dessous -
Cliquez sur main.wat et remplacez le code existant par le vôtre et cliquez sur le bouton Enregistrer.
Une fois enregistré, cliquez sur la construction à convertir en .wasm -
Si la construction réussit, vous devriez voir le fichier .wasm créé comme indiqué ci-dessous -
Descendez le fichier main.wasm et utilisez-le dans votre fichier .html pour voir la sortie comme indiqué ci-dessous.
Par exemple - add.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebAssembly Add Function</title>
</head>
<body>
<script>
let sum;
fetch("main.wasm")
.then(bytes => bytes.arrayBuffer())
.then(mod => WebAssembly.compile(mod)) .then(module => {
return new WebAssembly.Instance(module)
})
.then(instance => {
sum = instance.exports.add(10,40);
console.log("The sum of 10 and 40 = " +sum);
});
</script>
</body>
</html>La fonction add est exportée comme indiqué dans le code. Les paramètres passés sont 2 valeurs entières 10 et 40 et il en renvoie la somme.
Production
La sortie est affichée dans le navigateur.
