你首先需要 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 即可
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于