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"
[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------------------------------------------------------------------
网友评论