大家好，我是 世奇，笔名 ConardLi。

上周发了一篇 Wasm 的文章，主要分析的是今年 Google 开发者大会上的 Wasm 主题：

Wasm 为 Web 开发带来无限可能

其实主要还是我个人对 Rust 比较感兴趣，在今天的文章中，我将带大家完成一个将 Rust 实际应用到 React 项目中的小 Demo。

Wasm

在开始之前，我们还是先来回顾下 Wasm:

WebAssembly 是一种二进制指令格式，简称为 Wsam，它可以运行在适用于堆栈的虚拟机上。

WebAssembly 存在的意义就是成为编程语言的可移植编译目标，让在 Web 上部署客户端和服务端应用成为可能。

Wsam 具有紧凑的二进制格式，可为我们提供近乎原生的网络性能。随着它变得越来越流行，许多语言都编写了编译成 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：

然后，我们安装一些开发项目必备的包：

1
2
3
$ 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，编写一些测试代码：

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>code秘密花园 Hello, world!</h1>, document.getElementById('root'));

然后，我们为 babel 和 webpack 创建两个配置文件：

.babelrc：

1
2
3
4
5
6
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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，看看和我的是不是一样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "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 应用程序：

1
cargo init --lib .

执行完之后，会创建一个 Cargo.toml 和一个 src/lib.rc 文件。

然后，我们在 Cargo.toml 中引入 wasm-bindgen 这个包，另外我们还需要告诉编译器这个包是一个 cdylib：

1
2
3
4
5
6
7
8
9
10
[package]
name = "react-wasm"
version = "1.0.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

现在，你可以先尝试执行下 cargo build：

第一次执行可能会比较慢，可以 Google 搜一下怎么将 cargo 配置为国内源。

好了，上面只是测试一下构建，它现在还派不上用场，我们下面还要执行一下编译目标，执行：

1
$ rustup target add wasm32-unknown-unknown

指定好 wasm32-unknown-unknown 这个编译目标，我们才能把它应用到我们的 React 程序中，下面我们给我们的 src/lib.rs 写两个简单的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 编译一下：

1
$ cargo build --target wasm32-unknown-unknown

然后我们安装一下 wasm-bindgen-cli 这个命令行工具，以便我们能利用我们创建的 WebAssembly 代码：

1
$ cargo install -f wasm-bindgen-cli

安装后，我们可以使用 Rust 生成的 WebAssembly 给我们的 React 代码创建一个包：

1
$ wasm-bindgen target/wasm32-unknown-unknown/debug/react_wasm.wasm --out-dir build

执行完成后，编译好的 JavaScript 包和优化好的 Wasm 代码会保存到我们的 build 目录中，以供 React 程序使用。

在 React 程序中应用 Wasm

下面，我们尝试一下在我们的 React 程序中用上这些 Wasm 代码，我们现在 package.json 中添加一些常用的 npm 脚本：

1
2
3
"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 模块：

1
npm i -D @wasm-tool/wasm-pack-plugin

最后更新一下我们的 webpack.config.js，添加下面的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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 了！

参考

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。