[WebAssembly技术]Rust编译成wasm文件

WebAssembly (以下简称WASM)最近听到最多的,相对比较火的一个技术,现在主流的浏览器已经完成了对WebAssembly 的初步实现,并且围绕wasm的工具链也日趋完善。
由于 WASM 是静态类型,因此很难直接使用我们熟悉的 JavaScript来直接编写,目前的 WASM 都是通过其他静态语言编译而来。目前支持 WASM 的语言有 C++、Rust、Go等。其中 Rust 对 WASM 的支持度相对完善,社区活跃度也非常高。

1. WebAssembly是什么

通俗讲就是可以用C++,Rust,Go等静态语言编译成wasm二进制文件以供js语言进行加载调用,提高性能

2. WebAssembly特点

1) 运行高效
   编译后的二进制文件wasm,js加载运行效率是js的102) 跨平台
 跟js是没有任何耦合关系,用时加载,可移植性非常强
 
3 )可以解决js一些关键技术性能瓶颈的问题

4) 安全

3. 工具安装操作
1)安装rust工具链

	rustup:负责安装 Rust、切换 Rust 版本、下载标准库文件等
	rustc:Rust 的编译器(一般通过 Cargo 命令调用)
	cargo:Rust 的项目管理工具(类似 Node 的 NPM)
	运行:curl https://sh.rustup.rs -sSf | sh即可安装
  1. 安装 WASM 工具链
    wasm-pack 用于将 Rust 项目打包成单个 WASM 文件(类似 Webpack),运行 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh安装。

  2. 安装wasm_bindgen工具

cargo install wasm_bindgen

4. 具体操作
1) 新建一个rust项目

cargo new wasm-hello
//这里也可以用IDEA编译器直接创建
  1. 在生成的项目src文件夹下面创建一个lib.rs文件
    [WebAssembly技术]Rust编译成wasm文件_第1张图片
    lib.rs代码
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fib(i: u32) -> u32 {
    match i {
        0 => 0,
        1 => 1,
        _ => fib(i-1) + fib(i-2)
    }
}
  1. 编译成wasm
 wasm-pack build

[WebAssembly技术]Rust编译成wasm文件_第2张图片
最终会在pkg目录下生成.wasm文件和其他文件,如图所示:
[WebAssembly技术]Rust编译成wasm文件_第3张图片
4. js运行加载.wasm文件步骤

  1. 创建index.js 用于加载wasm文件
let squarer;

function loadWebAssembly(fileName) {
  return fetch(fileName)
    .then(response => response.arrayBuffer())
    .then(buffer => WebAssembly.compile(buffer))
    .then(module => {return new WebAssembly.Instance(module) });
};
  
loadWebAssembly('wasm_hello_bg.wasm')
  .then(instance => {
    squarer = instance.exports.fib(12);
    console.log('Finished compiling! Ready when you are...',squarer);
  }); 

2)创建index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WASM Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    
    <h1>WASM Demo</h1>
    <script src="./index.js"></script>
</body>
</html>

[WebAssembly技术]Rust编译成wasm文件_第4张图片
3)进入到目录运行http-server

http-server

4) 浏览器输入

127.0.0.1:8080

5)运行结果
[WebAssembly技术]Rust编译成wasm文件_第5张图片
过程就这么简单

资源下载
资源下载

你可能感兴趣的:(Rust,js,7.Rust知识-应用笔记,14.HTML5---应用笔记)