使用rust编译成WebAssembly(wasm)文件实践

WebAssembly （以下简称WASM）最近听到最多的，相对比较火的一个技术，目前支持 WASM 的语言比较多，其中使用 Rust 开发在开发效率和便捷性、包体积大小等方面还是有很大优势的，非常方便，实际上官方周边文档已经比较全面和友好了，社区活跃度也非常高。

WebAssembly特点

1、运行高效，编译后的二进制文件wasm，js加载运行效率是js的10倍

2、跨平台，跟js是没有任何耦合关系，用时加载，可移植性非常强

3、可以解决js一些关键技术性能瓶颈的问题

4、安全

安装rust工具链

1、安装rust rust下载地址

2、安装wasm-pack

cargo install wasm-pack

3、安装过程中需要的C++库  Visual Studio下载地址 选择安装C++

4、安装过程中可能会出现如下报错信息，安装Perl并重新打开命令行工具就好了 Perl下载地址

error: failed to run custom build command for openssl-sys v0.x.xx

使用cargo创建一个rust项目

cargo new hello

修改 src/lib.rs 文件

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn run(name: &str) {
    alert(&format!("Hello, {}!", name));
}

修改 Cargo.toml 文件

[package]
name = "hello"
version = "0.1.0"

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

[dependencies]
wasm-bindgen = "0.2"

编译成wasm

wasm-pack build

最终会在pkg目录下生成.wasm文件和其他文件

在JavaScript中调用

将hello_bg.js和hello_bg.wasm复制到项目中，然后调用

import('./hello_bg')
  .then((wasm) => {
    wasm.run('张三');
  });

OK成功~

文档

编译 Rust 为 WebAssembly

wasm-pack

Rust文档