Day 11 - wat、wasm 文件 wat2wasm wasm 的 helloworld wasm 的导入

你首先需要 rust 和 Npm 的环境

WebAssmembly 的两种文件格式

wasm

• 二进制文件
• 用于执行

wat

• 文本文件
• 用于编写代码
• 利用 wabt 将 wat 转化成 wasm

wat 文件的格式

​​

‍

我们可以利用网站：https://webassembly.github.io/wabt/demo/wat2wasm/将 wat 转化为 wasm

简单的创建一个项目

cmd 执行以下的命令

cargo new --lib wasm_game
mkdir www
cd www
npm install --save-dev webpack-dev-server
npm install --save-dev webpack-cli
npm install --save-dev copy-webpack-plugin

然后我们在 www 中创建文件： index.js​ webpack.config.js​

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "index.js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "./index.html", to: "./" }],
    }),
  ],
};

package.json

"scripts": {
    "dev": "webpack-dev-server", // 开发网页
    "build":"webpack build" // 打包
},

项目结构： ​

使用 wasm

我们直接下载之前网页上的 wasm，然后放在 public 中

async function run(){
    // 加载 wasm 需要时异步加载
    const response = await fetch("test1.wasm")
    const buffer = await response.arrayBuffer();
    const wasm = await WebAssembly.instantiate(buffer, fn_do);
  
    const func = wasm.instance.exports.add;
    let ret = func(3,4);
    console.log(ret);
}

run();

我们也可以让 wasm 执行 js 的函数

async function run(){
    const fn_do = {
        console:{
            log: ()=>{
                console.log("你好")
            },
            error: ()=>{
                console.log("错误")
            }
        }
    }
    // 加载 wasm 需要时异步加载
    const response = await fetch("test1.wasm")
    const buffer = await response.arrayBuffer();
    const wasm = await WebAssembly.instantiate(buffer, fn_do);
  
    const func = wasm.instance.exports.add;
    let ret = func(3,4);
    console.log(ret);
}

run();

我们在网页上写入下列代码：

(module
(import "console" "log" (func $log))
(import "console" "error" (func $error))
(func (export "add") (param i32 i32) (result i32)
local.get 0
local.get 1
call $log
call $error
i32.add))

下载他的 wasm 并且替换之前的 wasm 即可

‍