1、Windows系统,先到官网下载安装Rustup(内含Cargo,即Rust 的构建工具和包管理器)
https://www.rust-lang.org/zh-CN/learn/get-started
注意:在Windows上,安装Rust前,会提示先安装依赖的Microsoft C++构建工具,下载地址
https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/
下载下来之后,居然是一个Visual Studio Installer
的集成安装工具,为了节省空间,只需要勾选C++
生成工具,另外语言包至少勾选"英语"。安装后总共占用5个多G的存储空间。注意选择安装位置,否则默认安装到C盘**。
安装完成之后需要重启电脑。
如果不安装的话,直接cargo run
会有如下提示:
PS D:\dev\rust\hello-world> cargo run
Compiling hello-world v0.1.0 (D:\dev\rust\hello-world)
error: linker `link.exe` not found
|
= note: program not found
note: the msvc targets depend on the msvc linker but `link.exe` was not found
note: please ensure that VS 2013, VS 2015, VS 2017, VS 2019 or VS 2022 was installed with the Visual C++ option
error: could not compile `hello-world` due to previous error
MSVC++构建工具安装完成之后,直接运行rustup-init.exe,耐心等待Rust安装完成。
Current installation options:
default host triple: x86_64-pc-windows-msvc
default toolchain: stable (default)
profile: default
modify PATH variable: yes
1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
>1 #选1,典型安装即可
#...耐心等待下载安装
stable installed - rustc 1.44.1 (c7087fe00 2020-06-17)
Rust is installed now. Great!
重新打开一个命令行,输入
> cargo -V
cargo 1.44.1 (88ba85757 2020-06-11)
> rustc -V
rustc 1.44.1 (c7087fe00 2020-06-17)
检查Rust是否安装成功。
进入某个目录,如D:/dev/rust
,执行cargo new hello-world
创建一个rust项目。
rust项目名称习惯用短横线进行单词分隔,而rust变量名、函数名习惯用短下划线进行分隔。
cargo new hello-world
Created binary (application) `hello-world` package
cd ./hello-world
cargo run #编译运行
Compiling hello-world v0.1.0 (D:\dev\rust\hello-world)
Finished dev [unoptimized + debuginfo] target(s) in 0.89s
Running `target\debug\hello-world.exe`
Hello, world!
可能会遇到的问题:
如果项目中引入了其他crate(Rust的代码发布包),使用默认官方的仓库,因为网络原因很可能会一直
Blocking...
解决办法:
1、 删掉{安装目录}/.cargo/.package-cache文件。否则会一直Blocking…
安装目录默认为:C:/Users/用户名
2、 最好是替换掉官方的仓库为国内的镜像地址(俗称换源)。
在C:/Users/admin/.cargo/目录下新建一个config文件,填入如下内容:
[source.crates-io] replace-with = "gitee" [source.gitee] registry = "https://gitee.com/Aloxaf/crates.io-index"
这是笔者在gitee找到的一个可以正常使用的镜像,不过可能更新不及时。
还是建议换成中科大的:
[source.crates-io] replace-with = 'ustc' [source.ustc] registry = "https://mirrors.ustc.edu.cn/crates.io-index" [http] check-revoke = false
如果不行,还是可以试试清华大学的镜像
[source.crates-io] replace-with = 'tuna' [source.tuna] registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index"
如果编译中报错:
error[E0658]: `while` is not allowed in a `const fn`
可能是rustup和rust工具链太老了,执行rustup update
进行升级。
rust默认会被安装在C:/users/xxx/.cargo目录下。
可以将安装目录迁移到其他盘符下面,然后添加CARGO_HOME环境变量指向该目录即可。
比如,笔者将CARGO_HOME环境变量设置为:E:\env\rust.cargo
可以用VSCode
打开,刚刚cargo命令创建的hello-world目录。
强烈推荐如下几个插件:
1,rust-analyzer:它会实时编译和分析你的 Rust 代码,提示代码中的错误,并对类型进行标注。比官方的 rust 插件好用。(两者有冲突,需要禁用另外一个)
2,rust syntax:rust代码语法高亮。
3,crates:检查所依赖的第三方包是否是最新的版本,列出可用的版本。
4,better toml,Toml 配置文件高亮显示,并检查 toml 文件中的错误。
5,rust test lens:可以帮你快速运行某个 Rust 测试。
6,Tabnine:基于 AI 的智能自动补全,高效写代码“神器”。
cargo-generate
用于快速生成 WASM 项目的脚手架(类似 create-react-app),运行 cargo install cargo-generate
开始安装。
cargo install cargo-generate
https://rustwasm.github.io/wasm-pack/installer/
下载windows的,直接运行wasm-pack-init.exe
安装。
info: successfully installed wasm-pack to `C:\Users\liny\.cargo\bin\wasm-pack.exe`
Press enter to close this window...
cargo generate --git https://github.com/rustwasm/wasm-pack-template
在项目目录下运行wasm-pack build
命令,即可编译出 WASM 模块。wasm-pack会在项目的pkg目录下生成 .wasm等文件。
备注:
可能国内镜像仓库里面缺少一些依赖包的最新版本,导致wasm-pack-template无法build成功,可尝试降低Cargo.toml中依赖项的版本。
build之后会提示
[INFO]: Installing wasm-bindgen...
这个过程首次可能比较长,笔者等了7分多钟,终于还是完成了。
build成功之后,在pkg目录下生成.wasm文件和相关的js胶水代码。
有点前端基础的同学接下来就知道怎么把.wasm引入前端项目了吧。
上面wasm-pack build
生成的代码是Webpack项目的,需要webpack打包成原生js才能跑在浏览器当中。
不过,对于一些简单的前端项目和一些测试代码,笔者喜欢干净、原生的js直接丢浏览器跑。
如此操作一番:
wasm-pack build --target browser
自己写一个XHR,从服务器端读取xxx.wasm文件。
function getAsm(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params;
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var status = xhr.status;
if((status >= 200 && status < 300) || status == 304) {
options.success && options.success(xhr.response);
} else {
options.error && options.error(status);
}
}
};
xhr.open("GET", options.url, true);
};
//把build出来的js胶水代码拷贝到这里
var imports = {};//这里放需要导入到rust,让rust调用的函数
getAsm({
url: 'xxx_bg.wasm',
success: function(data) {
var result = WebAssembly.instantiate(data, imports);
result.then(function(data) {
//这里就获取到wasm导出的函数
//后续就可以通过wasm.xxxFunc()调用Rust代码编译出来的函数了
window.wasm = data.instance.exports;
})
}
});
观察js胶水代码中对TextDecoder的初始化:
let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
ignoreBOM
参数默认是true,实际上笔者在IPhone和Android机上测试,ignoreBOM
为true时,从wasm模块得到的string居然是带BOM的!!(不应该是为true会忽略BOM么?这语义有Bug啊!)ignoreBOM改为传入false,就OK了。
这个问题,笔者在另一篇文章有详细说明:WebAssembly+Rust:wasm返回给js的字符串长度看似不对的问题
全文完。