WebAssembly - Konwertuj WAT na WASM

W poprzednim rozdziale widzieliśmy, jak pisać kod w .wattj. format tekstowy WebAssembly. Format tekstowy WebAssembly nie będzie działał bezpośrednio w przeglądarce i musisz go przekonwertować na format binarny, czyli WASM, aby działał w przeglądarce.

WAT na WASM

Przekonwertujmy .WAT na .WASM.

Kod, którego będziemy używać, jest następujący -

(module 
   (func $add (param $a i32) (param $b i32) (result i32) 
      get_local $a 
      get_local $b 
      i32.add
   ) 
   (export "add" (func $add)) 
)

Teraz przejdź do WebAssembly Studio, który jest dostępny pod adresem https://webassembly.studio/.

Po kliknięciu linku powinieneś zobaczyć coś takiego -

Kliknij pusty projekt Wat i kliknij przycisk Utwórz u dołu.

Zabierze Cię do pustego projektu, jak pokazano poniżej -

Kliknij main.wat i zastąp istniejący kod swoim, a następnie kliknij przycisk Zapisz.

Po zapisaniu kliknij kompilację, aby przekonwertować ją na .wasm -

Jeśli kompilacja się powiedzie, powinieneś zobaczyć utworzony plik .wasm, jak pokazano poniżej -

W dół pliku main.wasm i użyj go w swoim pliku .html, aby zobaczyć dane wyjściowe, jak pokazano poniżej.

Na przykład - 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>

Funkcja add jest eksportowana, jak pokazano w kodzie. Przekazywane parametry to 2 wartości całkowite 10 i 40, a funkcja zwraca ich sumę.

Wynik

Dane wyjściowe są wyświetlane w przeglądarce.