全棧程序員的新玩具Rust(六)第一個WASM程序


先上代碼

https://gitee.com/lightsever/rust_study/tree/master/wasm_hello01


webassembly就不用再贅述了,耳朵里面快磨出繭子來了。

rustwasm是火狐自家的玩具,讓我們來繼續做實驗,讓rust飛起來吧。

環境安裝

安裝好rust環境之后仍然需要 一個 wasm 工具包

cargo install wasm-pack

然后如果想快速創建一個wasm項目模板可以用這個

cargo generate --git https://github.com/rustwasm/wasm-pack-template

WASM項目

生成后的項目代碼如下

image

#[wasm_bindgen]就是告訴rust,這個函數要么是導出給js用的,要么希望從js那拿過來用的。

自然 alert是從js那拿過來用

greet是給js調用的


我們搞helloworld,這里就先不改了


這個項目用cargo 編譯是生成不了wasm文件的

要在項目目錄用

wasm-pack build

image

這樣wasm就編譯成功了

image

生成的項目是個npm包,自己生成了膠水代碼,使用非常方便,但是要用webpack打包。

我自己npm都不熟練,我就不去搞這個了。

主要是不能接受暗藏玄機,我們要來搞一搞事情。

*之前了解不夠透徹,這里補充一下

image

wasm-pack 有四個輸出目標

我是分不清 browser 和 web 有什么區別,

但是這里有一個no-modules ,就是他,我們就是不想用打包系統

image

所以我寫了一個批處理來生成這種js,這樣的js我們就不需要改了,使用起來也更方便

后續也不要改動js項目了,使用也更加簡單

image

后面的部分都不需要看了

JS項目

我用TS來搞這個項目,他生成的膠水代碼是個npm包,所以直接放在網站項目里是不能用的,我們要來改一改。

你或許會有點疑惑都用WASM了?怎么還要寫js代碼?這是因為WASM不能完全替代js。他需要初始化,丟一些可以import的函數給WASM,要不然WASM啥也不能干。另外需要JS來調用WASM的某個函數,要不然WASM啥也不會干。

也就是說,主要是初始化和入口工作,這個工作可以一次性,然后整個網站的邏輯全部用wasm完成。

image

首先是膠水js,這個文件我們要做三處修改

1.首先

import * as wasm from …

這行刪掉,這是告訴js從wasm導入一個模塊,它會被打包程序替換,而我們不想用webpack

2.然后是底下有 export的兩行

把export 和 const 關鍵字刪除

image

這里是導入js函數給wasm的膠水代碼,和導出wasm函數個js的膠水代碼。

同理,原來都是 package系統用的東西

好了,改完了

但這樣wasm從哪里來?

js在web環境所有的全局變量都是 window 的成員,這樣我們隨便從哪都能給他塞進去

然后是膠水的定義.d.ts

image

把export 改為 declare,這就成了一個不依賴打包就能使用的定義文件啦。

寫我們的app.ts

image

愛用ts,你用js也差不多這樣


1.加載 wasm文件 為 arraybuffer


2.實例化wasm對象

這里有個小花招,我們直接把window塞了進去,否則你就需要手工構造一個wasm導入的js膠水函數的字典。因為所有的全局對象都是windows的成員,而rustwasm幫我們生成的膠水代碼都是全局定義的,直接丟window進去完事兒。


3.把全局的wasm對象給賦值了,這里直接window[“WASM”]這樣塞進去了。


4.調用wasm入口函數


按照我們編寫的rust代碼,應該alert 出一個  hello peter.

image

誠不欺我。

入口函數和初始化函數一次寫完就不用搞了。

以后只消生成wasm就是,當然膠水文件因為我們不是用rustwasm預設的配合webpack的用法,所以我們每次也要改改。但我們的改動其實很機械

1.js文件,有import的 整行刪掉

2.js文件,export 開頭的,刪除 export 和 const關鍵字

3.d.ts 文件,export開頭的,替換成 declare

回頭寫個腳本,自動辦了就是。


今天有了helloworld,寫個游戲,就不遠了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM