web 前端培训:使用 Rust 编写 React 组件
Wasm
在开始之前,我们还是先来回顾下 Wasm:
WebAssembly 是一种二进制指令格式,简称为 Wasm,它可以运行在适用于堆栈的虚拟机上。
WebAssembly 存在的意义就是成为编程语言的可移植编译目标,让在 Web 上部署客户端和服务端应用成为可能。
Wasm 具有紧凑的二进制格式,可为我们提供近乎原生的网络性能。随着它变得越来越流行,许多语言都编写了编译成 Web 程序集的绑定工具。
为什么是 Rust
Rust 是一个快速、可靠二期又节约内存的编程语言。在过去六年的 stackoverflow 的最受喜爱的编程语言中,前端培训它一直蝉联榜首的位置,主要还是这个语言本身拥有众多的优点,比如:
内存安全
类型安全
消除数据竞争
使用前编译
建立(并且鼓励)在零抽象之上
最小的运行时(无停止世界的垃圾搜集器,无 JIT 编译器,无 VM)
低内存占用(程序可以运行在资源受限的环境,比如小的微控制器)
针对裸机(比如,写一个 OS 内核或者设备驱动,把 Rust 当一个 ‘高层’汇编器使用)”
另外,Rust 在 WebAssembly 领域的贡献非常大的,使用 Rust 编写 WebAssembly 非常简单。
但是,Rust 存在的目的不是为了替代 JavaScript 而是和他形成互补,因为 Rust 语言的学习曲线是非常陡峭的,用它去完全替代 Web 开发几乎是不可能的。
所以,我们一般会在 Web 开发的工具链,或者前端页面中一些非常大量的数据计算中的操作用到它。
前置知识
在开始开发之前,你需要了解一些前置知识,React 相关的就不多说了,我们来看看 Rust 相关的几个重要概念。
cargo
cargo 是 rust 的代码组织和包管理工具,你可以将它类比为 node.js 中的 npm。
cargo 提供了一系列强大的功能,从项目的建立、构建到测试、运行直至部署,为 rust 项目的管理提供尽可能完整的手段。同时,它也与 rust 语言及其编译器 rustc 本身的各种特性紧密结合。
rustup
rustup 是 Rust 的安装和工具链管理工具,并且官网推荐使用 rustup 安装 Rust。
rustup 将 rustc(rust 编译器) 和 cargo 等工具安装在 Cargo 的 bin 目录,但这些工具只是 Rust 工具链中组件的代理,真正工作的是工具链中的组件。通过 rustup 的命令可以指定使用不同版本的工具链。
wasm-bindgen
wasm-bindgen 提供了 JS 和 Rust 类型之间的桥梁,它允许 JS 使用字符串调用 Rust API,或者使用 Rust 函数来捕获 JS 异常。
wasm-bindgen 的核心是促进 javascript 和 Rust 之间使用 wasm 进行通信。它允许开发者直接使用 Rust 的结构体、javascript 的类、字符串等类型,而不仅仅是 wasm 支持的整数或浮点数类型。
wasm-pack
wasm-pack 由 Rust / Wasm 工作组开发维护,是现在最为活跃的 WebAssembly 应用开发工具。
wasm-pack 支持将代码打包成 npm 模块,并且附带 Webpack 插件(wasm-pack-plugin),借助它,我们可以轻松的将 Rust 与已有的 JavaScript 应用结合。
wasm32-unknown-unknown
通过 rustup 的 target 命令可以指定编译的目标平台,也就是编译后的程序在哪种操作系统上运行。
wasm-pack 使用 wasm32-unknown-unknown 目标编译代码。
好了,了解了 Rust 相关的一些知识,我们一起来完成这个 Demo 吧。
一起来做个 Demo
在开始之前,要确保你的电脑上已经安装了 Node 和 Rust,可以在命令行分别输入 npm、rustup 看看能否找到命令,如果没安装的话自己先安装一下。
初始化一个简单 React 程序
首先,我们来初始化一个 React 项目,命令行执行 npm init:
然后,我们安装一些开发项目必备的包:
$ npm i react react-dom
$ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
$ npm i -D babel-core babel-loader @babel/preset-env @babel/preset-react
然后,我们在项目中创建一些常用的文件夹:src、page、public、build、和 dist。
我们在 page 文件夹中创建一个 index.jsx,编写一些测试代码:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>code 秘密花园 Hello, world!</h1>, document.getElementById('root'));
然后,我们为 babel 和 webpack 创建两个配置文件:
.babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './page/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[hash].js',
},
devServer: {
compress: true,
port: 8080,
hot: true,
static: './dist',
historyApiFallback: true,
open: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: `${__dirname }/public/index.html`,
filename: 'index.html',
}),
],
mode: 'development',
devtool: 'inline-source-map',
};
然后,在 public 下创建一个 index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>code 秘密花园</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
下面检查下你的 package.json,看看和我的是不是一样:
{
"name": "react-wasm",
"version": "1.0.0",
"description": "一个 Rust 编写 React 组件的 Demo",
"main": "src/index.jsx",
"scripts": {
"dev": "webpack server"
},
"keywords": [],
"author": "ConardLi",
"license": "MIT",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
}
}
下面,执行 npm install,然后 npm run dev,你就可以跑起来一个非常简单的 React 应用:
引入 Rust
好了,下面我们来编写我们的 Rust 组件(别忘了回顾下上面提到的 Rust 前置知识),首先我们使用 Rust 的包管理工具 cargo 来初始化一个简单的 Rust 应用程序:
cargo init --lib .
执行完之后,会创建一个 Cargo.toml 和一个 src/lib.rc 文件。
然后,我们在 Cargo.toml 中引入 wasm-bindgen 这个包,web前端培训另外我们还需要告诉编译器这个包是一个 cdylib:
[package]
name = "react-wasm"
version = "1.0.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
现在,你可以先尝试执行下 cargo build:
好了,上面只是测试一下构建,它现在还派不上用场,我们下面还要执行一下编译目标,执行:
$ rustup target add wasm32-unknown-unknown
指定好 wasm32-unknown-unknown 这个编译目标,我们才能把它应用到我们的 React 程序中,下面我们给我们的 src/lib.rs 写两个简单的函数:
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn big_computation() {
alert("这个是一个超级耗时的复杂计算逻辑");
}
#[wasm_bindgen]
pub fn welcome(name: &str) {
alert(&format!("Hi 我是 {} ,我在 code 秘密花园 !", name));
}
为了确保我们的 Rust 应用程序正常工作,我们重新用 wasm32-unknown-unknown 编译一下:
$ cargo build --target wasm32-unknown-unknown
然后我们安装一下 wasm-bindgen-cli 这个命令行工具,以便我们能利用我们创建的 WebAssembly 代码:
$ cargo install -f wasm-bindgen-cli
安装后,我们可以使用 Rust 生成的 WebAssembly 给我们的 React 代码创建一个包:
$ wasm-bindgen target/wasm32-unknown-unknown/debug/react_wasm.wasm --out-dir build
执行完成后,编译好的 JavaScript 包和优化好的 Wasm 代码会保存到我们的 build 目录中,以供 React 程序使用。
在 React 程序中应用 Wasm
下面,我们尝试一下在我们的 React 程序中用上这些 Wasm 代码,我们现在 package.json 中添加一些常用的 npm 脚本:
"build:wasm": "cargo build --target wasm32-unknown-unknown",
"build:bindgen": "wasm-bindgen target/wasm32-unknown-unknown/debug/rusty_react.wasm --out-dir build",
"build": "npm run build:wasm && npm run build:bindgen && npx webpack",
然后我们执行 npm run build 就可以打包所有代码啦。
下面,我们还需要安装一下上面我们提到的 wasm-pack 的 Webpack 插件,它可以帮助我们把 Wasm 代码打包成 NPM 模块:
npm i -D @wasm-tool/wasm-pack-plugin
最后更新一下我们的 webpack.config.js,添加下面的配置:
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
...
plugins: [
...
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, ".")
}),
],
...
experiments: {
asyncWebAssembly: true
}
下面,执行一下这几个命令:npm run build:wasm、npm run build:bindgen、npm run build,应该都不会报错。
最后,我们在我们的 React 组件中调用一下我们刚刚生成的 Wasm 模块:
import React, { useState } from "react";
import ReactDOM from "react-dom";
const wasm = import("../build/rusty_react");
wasm.then(m => {
const App = () => {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
const handleClick = () => {
m.welcome(name);
}
return (
<>
<div>
<h1>Hi there</h1>
<button onClick={m.big_computation}>Run Computation</button>
</div>
<div>
<input type="text" onChange={handleChange} />
<button onClick={handleClick}>Say hello!</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
});
下面,你就可以在 React 组件中愉快的使用 Rust 了!
文章来源于前端开发
评论