mac + wasm + rust 环境搭建

1.安装rustup

打开终端执行下面命令

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

重要：如果你没有翻墙，会发现安装不了

error: could not download file from 'https://static.rust-lang.org/dist/channel-rust-stable.toml' to '/Users/apple/.rustup/tmp/x3tlzua732gf0u19_file.toml'
info: caused by: error reading from socket
info: caused by: timed out

解决方法： 电脑连上手机热点，再执行命令curl https://sh.rustup.rs -sSf | sh

image.png

输入1并回车

image.png

这说明已经安装完成，执行下面命令使环境变量生效：

$ source $HOME/.cargo/bin

检查rust环境变量是否生效：

$ rustc --version

image.png

2.创建config文件，路径为$HOME/.cargo/config，加入以下内容

[source.crates-io]

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

# replace with your favourite mirror

replace-with = 'sjtu'

[source.ustc]

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

[source.sjtu]

registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index"
![image.png](https://upload-images.jianshu.io/upload_images/9960789-b07789080ae1b41f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

[source.rustcc]

registry = "https://code.aliyun."

3.安装 cargo-generate

cargo-generate 是一个用于快速生成 WASM 项目的脚手架（类似 vue-cli）

$ cargo install cargo-generate

4.安装 wasm-pack

wasm-pack 用于将 Rust 项目打包成单个 WASM 文件（类似 Webpack），是wasm的打包工具

$ cargo install wasm-pack

5.创建wasm + rust项目

5.1 在根目录通过创建工具创建一套rust的模板代码, 命名为wasm-project

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

目录如下

image.png

在这个项目的根目录下执行构建命令来编译我们的wasm文件

$ wasm-pack build

随后生成了pkg文件夹，这下面就是我们的wasm项目编译出来的文件

image.png

5.2 随后我们创建一个文件来测试生成的wasm文件，在这个目录下创建package.json文件

{

    "name": "wasm-project",
    "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"
    }
  }

5.3 在这个目录下创建webpack.config.js文件

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');
module.exports = {
  entry: "./test_wasm.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "test_wasm.js",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin(['index.html'])
  ],
};

5.4 创建test_wasm.js

import("./index.js")
  .catch(e => console.error("Error importing `index.js`:", e));

5.5 创建index.html

5.6 创建index.js

import * as wasm from "./pkg/wasm_project_bg.wasm";

wasm.greet()

5.7 执行wasm-project项目

$ sudo npm install
$ npm start

5.8 在浏览器访问 http://localhost:8080/可以看到弹框

image.png

一个简单的用rust写的wasm项目运行起来了~

end------------------------------------------------------------------