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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello rust</title>
</head>
<body>
    <script src="./test_wasm.js"></script>
</body>
</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------------------------------------------------------------------