WebAssembly - Konvertieren Sie WAT in WASM

Im vorherigen Kapitel haben wir gesehen, wie man Code schreibt .watdh WebAssembly-Textformat. Das WebAssembly-Textformat funktioniert nicht direkt im Browser, und Sie müssen es in das Binärformat konvertieren, dh WASM, damit es im Browser funktioniert.

WAT zu WASM

Konvertieren wir .WAT in .WASM.

Der Code, den wir verwenden werden, lautet wie folgt:

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

Jetzt geh zu WebAssembly Studio, die bei verfügbar ist https://webassembly.studio/.

Sie sollten so etwas sehen, wenn Sie auf den Link klicken -

Klicken Sie auf Leeres Wat-Projekt und unten auf die Schaltfläche Erstellen.

Sie gelangen zu einem leeren Projekt wie unten gezeigt -

Klicken Sie auf main.wat und ersetzen Sie den vorhandenen Code durch Ihren und klicken Sie auf die Schaltfläche Speichern.

Klicken Sie nach dem Speichern auf den Build, um ihn in .wasm - zu konvertieren.

Wenn der Build erfolgreich ist, sollte die WASM-Datei wie unten gezeigt erstellt werden.

Gehen Sie in die Datei main.wasm und verwenden Sie sie in Ihrer HTML-Datei, um die Ausgabe wie unten gezeigt anzuzeigen.

Zum Beispiel - 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>

Die Funktion add wird wie im Code gezeigt exportiert. Die übergebenen Parameter sind 2 ganzzahlige Werte 10 und 40 und geben die Summe davon zurück.

Ausgabe

Die Ausgabe wird im Browser angezeigt.