WebAssembly 入门

2021/01/25 22:00
阅读数 622

Wasm 是什么?

MDN 官方文档[1]是这样给出定义

WebAssembly(为了书写方便,简称 Wasm)是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如 C / C ++等语言提供一个编译目标,以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存,允许两者一起工作。

对于网络平台而言,WebAssembly 具有巨大的意义——它提供了一条途径,以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下,以前无法以此方式运行的客户端软件都将可以运行在 Web 中。

WebAssembly 被设计为可以和 JavaScript 一起协同工作——通过使用 WebAssembly 的 JavaScript API,你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 WebAssembly 的性能和威力以及 JavaScript 的表达力和灵活性,即使你可能并不知道如何编写 WebAssembly 代码。


在学习于航老师的《WebAssembly 入门课》开篇词中,老师是这样总结的“WebAssembly 是基于栈式虚拟机的虚拟二进制指令集(V-ISA),它被设计为高级编程语言的可移植编译目标”。

带着好奇心,开启我们的 Wasm 学习之路,创建属于自己的第一个 Wasm 应用。

环境安装

Rust[2]

一门赋予每个人
构建可靠且高效软件能力的语言。

  • 安装
# macOS
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 其他安装方式
# https://forge.rust-lang.org/infra/other-installation-methods.html
  • 命令
# 版本更新
rustup update

# 查看版本
cargo --version

# 构建项目
cargo build

# 运行项目
cargo run

# 测试项目
cargo test

# 为项目构建文档
cargo doc

# 将库发布到 crates.io
cargo publish
# nightly rust
rustup toolchain install nightly

rustup toolchain list

rustup override set nightly

Node.js[3]

Node.js 是基于 Chrome 的 V8 JavaScript 引擎构建的 JavaScript 运行时

wasm-pack[4]

用于构建和使用您希望与 JavaScript,浏览器或 Node.js 互操作的Rust生成的 WebAssembly。

  • 安装
# macOS
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 其他安装方式
# https://rustwasm.github.io/wasm-pack/installer
  • 命令
# 创建
# https://rustwasm.github.io/docs/wasm-pack/commands/new.html
wasm-pack new <name> --template <template> --mode <normal|noinstall|force>

# 构建
# https://rustwasm.github.io/docs/wasm-pack/commands/build.html
wasm-pack build
  [--out-dir <out>]
  [--out-name <name>]
  [--<dev|profiling|release>]
  [--target <bundler|nodejs|web|no-modules>]
  [--scope <scope>]
  [mode <normal|no-install>]

# 测试
# https://rustwasm.github.io/docs/wasm-pack/commands/test.html
wasm-pack test

# 发包
# https://rustwasm.github.io/docs/wasm-pack/commands/pack-and-publish.html
# npm pack
wasm-pack pack
# npm publish
wasm-pack publish

Vite[5]

下一代前端工具

vite-plugin-rsw [6]:vite 插件集成 wasm-pack,实现热更新以及构建
# vite项目中安装
npm i -D vite-plugin-rsw
# or
yarn add -D vite-plugin-rsw

快速开始

  • 在原有 vite项目中使用,只需安装配置 vite-plugin-rsw插件即可。
  • 新项目可以使用 vite提供的 @vitejs/app初始化项目,然后安装配置 vite-plugin-rsw
  • 新项目推荐使用我的脚手架 create-xc-app,会定期更新维护相关版本依赖。

create-xc-app[7]

⚡️ 在几秒钟内创建一个项目!维护了多种基于 vite,deno 等的前端项目模板。

npx create-xc-app my-wasm-app --template wasm-react

创建 Wasm 包

# 两种方式
# name如果以@开头创建npm组织包
# 会被转成中划线连接,需要手动修改文件夹名称
wasm-pack new <name>
# or
# name可以是npm组织
# 例:cargo new --lib @rsw/hello
# 需要手动配置Cargo.toml
cargo new --lib <name>

项目结构

# 推荐目录结构
[my-wasm-app] # 项目根路径
|- [rust-crate] # npm包`rust-crate`
|    |- [pkg] # 生成wasm包的目录
|    |- [src] # rust源代码
|    | # 了解更多: https://doc.rust-lang.org/cargo/reference/cargo-targets.html
|    |- [target] # 项目依赖,类似于npm的`node_modules`
|    | # 了解更多: https://doc.rust-lang.org/cargo/reference/manifest.html
|    |- Cargo.toml # rust包管理清单
|    `- ...
|- [@rsw] # npm 组织包
|     |- [hello] # @rsw/crate, 目录结构同`rust-crate`
|     `- ...
|- [node_modules] # 前端的项目包依赖
|- [src] # 前端源代码(可以是vue, react, 或其他)
# 了解更多: https://nodejs.dev/learn/the-package-json-guide
|- package.json # `npm`或`yarn`包管理清单
# 了解更多: https://vitejs.dev/config
|- vite.config.ts # vite配置文件
# 了解更多: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
|- tsconfig.json # vite配置文件
` ...

乍一看,可能会觉得目录有点复杂,其实它就是一个标准的基于vite前端项目,然后,在根路径下添加我们需要构建的 wasm 包(一个 rust crate 会对应生成一个 wasm 包,可单独发布到 npm 上)

项目配置

Step1: vite.config.ts

// 以react项目为例
import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';
import ViteRsw from 'vite-plugin-rsw';

export default defineConfig({
  plugins: [
    reactRefresh(),
    // 更多配置:https://github.com/lencx/vite-plugin-rsw
    ViteRsw({
      // 包含生产和开发模式
      mode'release',
      crates: [
        // 包名称,支持npm组织
        '@rsw/chasm'
      ]
    }),
  ],
})

Step2: rust-crate/Cargo.toml

# ...

[lib]
# https://doc.rust-lang.org/reference/linkage.html
crate-type = ["cdylib"]
wasm-opt = false

# https://doc.rust-lang.org/cargo/reference/profiles.html
# dev | release | test | bench
[profile.release]
lto = true
opt-level = "s"

# https://doc.rust-lang.org/cargo/guide/dependencies.html
# 指定依赖项:https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html
# 依赖包及版本管理,与npm的`package.json`类似
[dependencies]
wasm-bindgen = "0.2.69"

Step3: rust-crate/src/lib.rs

use wasm_bindgen::prelude::*;

// Import the `window.alert` function from the Web.
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

// Export a `greet` function from Rust to JavaScript, that alerts a hello message.
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

Step4: src/App.tsx

import React, { useEffect } from 'react';
import init, { greet } from 'wasm-test';

import logo from './logo.svg';
import './App.css';

function App({
  useEffect(() => {
    // wasm初始化,在调用`wasm-test`包方法时
    // 必须先保证已经进行过初始化,否则会报错
    // 如果存在多个wasm包,则必须对每一个wasm包进行初始化
    init();
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello WebAssembly!</p>
        <p>Vite + Rust + React</p>
        <p>
          {/* 调用greet方法 */}
          <button onClick={() => greet('wasm')}>hi wasm</button>
        </p>
        <p>Edit <code>App.tsx</code> and save to test HMR updates.</p>
      </header>
    </div>

  )
}

export default App

完整代码示例

源码: https://github.com/lencx/learn-wasm

文章写到这里,整个 wasm 项目搭建已经完成,接下来就是大家发挥想象力的时候了。点击文末的 ☞ 阅读原文,有命令行演示视频。

技术交流

关注公众号《浮之静》,发送进群,我将拉你进群一起学习进步。


相关链接

  • vite: https://vitejs.dev
  • nodejs: https://nodejs.org
  • rust: https://www.rust-lang.org
  • webassembly: https://webassembly.org
  • rsw: https://github.com/lencx/vite-plugin-rsw
  • wasm-pack: https://rustwasm.github.io/wasm-pack
  • rust-to-wasm: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm
  • wasm-bindgen: https://github.com/rustwasm/wasm-bindgen
  • learn-wasm: https://github.com/lencx/learn-wasm

参考资料

[1]

MDN官方文档: https://developer.mozilla.org/en-US/docs/WebAssembly

[2]

Rust: https://www.rust-lang.org/zh-CN/learn/get-started

[3]

Node.js: https://nodejs.org/en/download

[4]

wasm-pack: https://github.com/rustwasm/wasm-pack

[5]

Vite: https://vitejs.dev

[6]

vite-plugin-rsw: https://github.com/lencx/vite-plugin-rsw

[7]

create-xc-app: https://github.com/lencx/create-xc-app


本文分享自微信公众号 - WebAssembly 中文社区(webassemblywasm)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部