提前准备
此一篇文章我们主要应用 Rust 来撰写我们自己的 WebAssembly 工具库之后在 React 运用进行使用。因此需要备好以下的生活环境
- Rust 开发工具(rustup、rustc、cargo 这种)
- 前端工程师自然环境(node、npm 这种)
- wasm-pack
(cargo install wasm-pack)
逐渐
开始之前大家需先准备一个前面运用，接下来我们应用 create-react-app 来创建一个 React 新项目。
假如未安装 create-react-app ，首先用 pnpm (npm / yarn 也可以的)全局性组装一下
npm install -g create-react-app
创建项目
应用 typescript 模版来创建项目，以得到更好的种类提醒。
create-react-app react-wasm --template typescript
进入刚建立好的创业项目清单中
cd react-wasm
建立好 react 新项目以后，大家下面应用 wasm-pack 创建一个 wasm 工具库
wasm-pack new wasm-lib
建立结束后我们自己的目录结构是像下边这样的，
src 文件目录关键撰写前面运用编码
wasm-lib/src 文件目录关键撰写 rust wasm 编码
wasm-lib/src/lib.rs 目录下，这里是我们能开展撰写供前面调用的 WebAssembly 函数公式。这儿默认设置写完了一个 greet 函数公式，随后里边启用了 alert 弹窗。下面我们就看一看怎样在前面中进行使用这一函数公式。
mod utils;
use wasm_bindgen::prelude::*;
// 当 `wee_alloc` 特点启动的情况下, 应用 `wee_alloc` 做为全局性调节器
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern "C" {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
alert("Hello, wasm-lib!");
}
装包 wasm
在 package.json 文档中加入这一行代码，然后我们能够进行装包了。
新项目网站根目录中运作
npm run build:wasm
若是在 build 的一个过程卡住，或是出错了。可以直接临时把代码设计给关掉掉
在 wasm-lib 目录下的 Cargo.toml 环境变量中关闭 wasm-opt
打包完成后就可以看到新项目网站根目录中出现了一个 pkg 文件夹名称，这里边是我们装包后时代的产物，前面能够进行启用我们用 Rust 整理的函数公式。
前面启用
大家主要有两种方式去启用 pkg 目录下的 wasm 函数公式：
一种是把 pkg 作为一个 npm 包公布
cd wasm-lib
# 该指令能把这一库做为 npm 包分享到 npm 中，最后我们前面就正常的的形式 npm install 就可以使用了
wasm-pack publish
另一种是先往当地开展引入，目录下组装
npm install ./pkg
随后 package.json 的依赖性中加入了我们当地库：
{
"name": "react-wasm",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.1",
"@types/node": "^16.11.36",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.2",
"wasm-lib": "file:pkg", //
"web-vitals": "^2.1.4"
},
// ...
}
下面便去我们自己的 App.tsx 中启用 greet 方式：
import React, { useEffect } from "react";
import init, { greet } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
//
useEffect(() => {
init().then(() => {
greet();
});
}, []);
return (
<div className="App">
...
</div>
);
}
export default App;
随后运行我们自己的 react 运用
npm run start
开启 localhost:3000 端口号，能够看见大家启用 alert 方式取得成功咯~
应用 console.log
首先你要组装一下 web-sys 这个包，在 Cargo.toml 里加入
[dependencies]
wasm-bindgen = "0.2.63"
web-sys = { version = "0.3.57", features = ['console'] } #
在这里我们打开了 console 这一 feature， web-sys 还提供了许多 feature，或者可以实际操作 DOM，启用前面原生态 fetch API ， 实际操作 Canvas ， WebGL 等。
Rust：
mod utils;
use web_sys::console;
use wasm_bindgen::prelude::*;
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
pub fn test_log(val: JsValue) {
console::log_2(&"从JS端接收到数据信息".into(), &val);
}
JS：
import React, { useEffect } from "react";
import init, { test_log } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
useEffect(() => {
init().then(() => {
test_log({ a: 1, b: 2, c: 3 });
});
}, []);
return (
<div className="App">
...
</div>
);
}
export default App;
打印出结论：
汇总
像一些繁杂的测算，我们可以使用 WebAssembly 来来操作，例如上一篇。 WebAssembly 现阶段论研发效率而言我觉得是比不上原生态 JS 的，稍微有一点繁杂，现阶段觉得它的应用场景更多的是在多元性计算行业，例如写游戏、音频视频分析、加解密、图片解析等这些必须繁杂计算出来的。这儿仅仅提供一个基本这个小demo，让大家这东西有一个感性掌握，更深层次的物品就要后边使用的时候才来了解了。
最终这儿放入 官方网参照文本文档