mac安装rust的webassembly开发环境

背景

2019年12月5日，W3C WebAssembly 工作组发布 WebAssembly 正式推荐标准（W3C Recommendation），为 Web 带来一种支持代码在浏览器中运行的新语言。

webassembly实际上已经提出很多年了，今年12月w3c终于发布了正式推荐标准，所以开始学习和研究一下。

按照目前的理解，webassembly并不是JavaScript的替代品，它能做的事情其实就是下面几点：

1. 让一些非浏览器的能使用的语言，可以在浏览器中运行，如c、go、rust等。

2. 可以更高效率的进行一些计算操作，尽管各个语言库里面好像也有操作dom的库，但是目前看，操作dom并不是webassembly所擅长的事情。

所以按照目前的理解，要了解webassembly，过程首先是根据教程，把webassembly的运行框架搭建起来（我选择了rust），然后是搞清楚JavaScript和webassembly相互调用的边界在哪里，最后再深入学习rust相关语法，以及rust在编写webassembly的时候的代码都应该怎么写。

本文就先进行第一步和第二步，搭建运行环境，初步了解JavaScript和webassembly的边界。

安装rust

安装rust基础工具

官方给出的安装方式如下

curl https://sh.rustup.rs -sSf | sh

但是在国内这样直接安装会非常非常非常慢，所以我们需要配置国科大的源(使用zsh的，把bashrc换成zshrc即可)

# 编辑文件
 
$ vim ~/.bashrc

# 在文件中加入以下两句

export RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static

export RUSTUP_UPDATE_ROOT=https://mirrors.ustc.edu.cn/rust-static/rustup
 
# 接下来运行命令使文件生效

$ source ~/.bashrc

运行完上述命令后，再运行 curl https://sh.rustup.rs -sSf | sh 就可以正常安装了。

对于新手来说，一路选择默认安装选项即可。

安装后，再配置一下cargo的源，后面使用cargo就都可以使用国内源了。

编辑~/.cargo/config文件（如果没有就手动创建）

[registry]

index="https://mirrors.ustc.edu.cn/crates.io-index/"

[source.crates-io]

registry="https://github.com/rust-lang/crates.io-index"

replace-with='ustc'

[source.ustc]

registry="https://mirrors.ustc.edu.cn/crates.io-index/"

安装生成工具

1. cargo-generate 是一个用于快速生成 WASM 项目的脚手架，运行 cargo install cargo-generate即可进行安装。

2. wasm-pack 用于将 Rust 项目打包成单个 WASM 文件（类似 Webpack），运行cargo install wasm-pack进行安装

准备webassembly开发环境

1. 准备一个空目录，新建package.json如下

{

    "name": "hello-rust",

    "version": "0.1.0",

    "main": "index.js",

    "scripts": {

      "build": "webpack --config webpack.config.js",

      "start": "webpack-dev-server --open"

    },

    "devDependencies": {

      "hello-wasm-pack": "^0.1.0",

      "webpack": "^4.16.3",

      "webpack-cli": "^3.1.0",

      "webpack-dev-server": "^3.1.5",

      "copy-webpack-plugin": "^4.5.2"

    }

  }

2. 新建webpack.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");

const path = require('path');

module.exports = {

  entry: "./bootstrap.js",

  output: {

    path: path.resolve(__dirname, "dist"),

    filename: "bootstrap.js",

  },

  mode: "development",

  plugins: [

    new CopyWebpackPlugin(['index.html'])

  ],

};

3. 创建index.html

4. 创建 bootstrap.js

import("./index.js")

5. 创建index.js

// var wasm = require('./wasm-app-demo/pkg/wasm_app_demo'); //引用pkg里面的js文件

import * as wasm from './wasm-app-demo/pkg/wasm_app_demo_bg.wasm';    //直接引用wasm文件

function fib(i) {

    if (i === 0)  return 0;

    if (i === 1)  return 1;

    return fib(i - 1) + fib(i - 2);

}

console.time('wasm');

console.log(wasm.fib(45));

console.timeEnd('wasm');

console.time('js');

console.log(fib(45));

console.timeEnd('js');

6. 编写并构建wasm文件

上面几步创建好了wasm的使用代码，里面已经有了对wasm的引用，但是代码我们还没有创建，下面我们就来新建wasm相关的代码。

首先在根目录通过创建工具创建一套rust的模板代码：

cargo generate --git https://github.com/rustwasm/wasm-pack-template

根据命令提示，创建名称为 wasm-app-demo的rust代码文件夹，创建好后，目录如下：

image

其中pkg和target文件夹，刚新建出来是没有的。

我们这个时候编辑src/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)

    }

}

这是一个计算斐波那契数列的递归函数，里面代码的具体含义，我们先不在这里过多深入。

现在我们在 wasm-app-demo 文件夹下运行wasm-pack build命令来编译我们的wasm文件。

命令成功后，我们在wasm-app-demo文件夹下会发现pkg文件夹，内容如下：

image

其中生成了js，ts和wasm文件。我们没有使用typescript，所以不需要ts的文件， js和wasm文件我们都可以来使用，是一样的。在上面的index.js里面已经都写了不同的用法。

运行代码

在根目录运行 npm i ， 再运行 npm start 即可看到效果。

image

wasm代码是在chrome浏览器运行的，可以看出其实也没有快多少；但是在Firefox里面效果会明显一些，大概是50% js的时间。

搭建环境和写本文的时候，参考了如下文章：

1. https://imweb.io/topic/5c06b8b0611a25cc7bf1d7d5

2. https://www.jianshu.com/p/fa3b8b4896cc