WebAssembly - Convertir WAT en WASM
En el capítulo anterior, hemos visto cómo escribir código en .wates decir, formato de texto de WebAssembly. El formato de texto de WebAssembly no funcionará directamente dentro del navegador y debe convertirlo a formato binario, es decir, WASM para que funcione dentro del navegador.
WAT a WASM
Convirtamos .WAT a .WASM.
El código que vamos a utilizar es el siguiente:
(module
(func $add (param $a i32) (param $b i32) (result i32)
get_local $a
get_local $b
i32.add
)
(export "add" (func $add))
)
Ahora ve a WebAssembly Studio, que está disponible en https://webassembly.studio/.
Debería ver algo como esto, cuando presione el enlace:
Haga clic en el proyecto Empty Wat y haga clic en el botón Crear en la parte inferior.
Lo llevará a un proyecto vacío como se muestra a continuación:
Haga clic en main.wat y reemplace el código existente con el suyo y haga clic en el botón Guardar.
Una vez guardado, haga clic en la compilación para convertir a .wasm -
Si la compilación es exitosa, debería ver el archivo .wasm creado como se muestra a continuación:
Baje el archivo main.wasm y utilícelo dentro de su archivo .html para ver el resultado como se muestra a continuación.
Por ejemplo: 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 función agregar se exporta como se muestra en el código. Los parámetros pasados son 2 valores enteros 10 y 40 y devuelve la suma de los mismos.
Salida
La salida se muestra en el navegador.