接下来将会讲解在windows上安装基于rust的WebAssembly的环境安装（rust的环境安装就不说了）

1 安装gcc与pkg-config

• gcc： 是 GNU 编译器套件（GNU Compiler Collection）的缩写，它是一个用于编译多种编程语言的编译器。它最初只支持 C 语言，但现在也支持 C++、Objective-C、Fortran、Ada 和 Go 等语言。
• pkg-config： 是一个命令行工具,通过它,可以知道库的include路径、lib路径以及需要链接的库名

在windows上最简单安装方式就是通过MSYS2安装，MSYS2 是一个 Windows 软件分发和构建平台。它提供了类似 Unix 的环境、命令行界面和软件仓库，使在 Windows 上安装、使用、构建和移植软件变得更加容易。这意味着可以通过 Pacman（一个功能齐全的包管理器）轻松安装 Bash、Autotools、Make、Git、GCC、GDB 等工具。

，官网地址为：www.msys2.org/

下载安装完成（这里默认安装在c盘）之后，运行终端

执行如下命令

 # 这个命令用于同步软件包数据库并升级系统。-Syuu 是一个组合选项，其中 -S 表示同步，-y 表示刷新本地缓存，而 -uu 表示允许降级软件包。这个命令通常用于在滚动更新的系统中进行完整的系统升级1
 $ pacman -Syuu
 # 安装mingw-w64-x86_64-gcc,  -S 选项表示同步，它会安装指定的软件包及其所有依赖项
 $ pacman -S mingw-w64-x86_64-gcc
 # 安装mingw-w64-x86_64-pkg-config
 $ pacman -S mingw-w64-x86_64-pkg-config
 # 安装mingw-w64-x86_64-zlib
 $ pacman -S mingw-w64-x86_64-zlib

安装完成之后，需要配置环境变量，刚才，我把工具安装到了C:\msys64 下，那么配置如下

1. 环境变量添加：C:\msys64\mingw64\bin

1. 添加全局变量

 PKG_CONFIG_PATH
 C:\msys64\mingw64\lib\pkgconfig

点击确定之后，在powershell中校验是否安装完成

 $  gcc -v
 Using built-in specs.
 COLLECT_GCC=C:\msys64\mingw64\bin\gcc.exe
 COLLECT_LTO_WRAPPER=C:/msys64/mingw64/bin/../lib/gcc/x86_64-w64-mingw32/13.1.0/lto-wrapper.exe
 Target: x86_64-w64-mingw32
 Configured with: ../gcc-13.1.0/configure --prefix=/mingw64 --with-local-prefix=/mingw64/local --build=x86_64-w64-mingw32 --host=x86_64-w64-mingw32 --target=x86_64-w64-mingw32 --with-native-system-header-dir=/mingw64/include --libexecdir=/mingw64/lib --enable-bootstrap --enable-checking=release --with-arch=nocona --with-tune=generic --enable-languages=c,lto,c++,fortran,ada,objc,obj-c++,jit --enable-shared --enable-static --enable-libatomic --enable-threads=posix --enable-graphite --enable-fully-dynamic-string --enable-libstdcxx-filesystem-ts --enable-libstdcxx-time --disable-libstdcxx-pch --enable-lto --enable-libgomp --disable-libssp --disable-multilib --disable-rpath --disable-win32-registry --disable-nls --disable-werror --disable-symvers --with-libiconv --with-system-zlib --with-gmp=/mingw64 --with-mpfr=/mingw64 --with-mpc=/mingw64 --with-isl=/mingw64 --with-pkgversion='Rev7, Built by MSYS2 project' --with-bugurl=https://github.com/msys2/MINGW-packages/issues --with-gnu-as --with-gnu-ld --disable-libstdcxx-debug --with-boot-ldflags=-static-libstdc++ --with-stage1-ldflags=-static-libstdc++
 Thread model: posix
 Supported LTO compression algorithms: zlib zstd
 gcc version 13.1.0 (Rev7, Built by MSYS2 project)

 $ pkg-config --cflags --libs zlib
 -IC:/msys64/mingw64/include -LC:/msys64/mingw64/lib -lz

2 安装wasm-pack

如果rust环境和上述环境全部安装正确，那么这一步很简单

 $ cargo install wasm-pack

3 hello world

3.1 创建例子

1. 使用cargo创建一个项目，并用vscode打开

 $ cargo new --lib hello-wasm
 $ cd .\hello-wasm\
 $ code ./

2. 修改Cargo.toml

 [package]
 name = "hello-wasm"
 version = "0.1.0"
 edition = "2021"
 ​
 [dependencies]
 wasm-bindgen = "0.2"
 ​
 [lib]
 crate-type = ["cdylib", "rlib"]
 ​
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = false

3. 修改src/lib.rs，编译一个计算斐波那契数列的函数

 use wasm_bindgen::prelude::*;
 ​
 #[wasm_bindgen]
 pub fn fibonacci(n: u32) -> u64 {
     if n == 0 || n == 1 {
         return n as u64;
     }
     let mut a = 0;
     let mut b = 1;
     for _ in 1..n {
         let c = a + b;
         a = b;
         b = c;
     }
     b
 }

3.2 编译为node版本

接着编译命令如下

 $ wasm-pack build --target nodejs
 [INFO]: Checking for the Wasm target...
 [INFO]: Compiling to Wasm...
 ......
 [INFO]: :-) Done in 0.28s
 [INFO]: :-) Your wasm pkg is ready to publish at D:\hello-wasm\pkg.

可以测试了，在项目根目录创建一个测试脚本

• test.js

 const wasm = require('./pkg/hello_wasm.js')
 ​
 console.time('rust')
 console.log(wasm.fibonacci(20))
 console.timeEnd('rust')

3.3 编译为web版本

 $ wasm-pack build --target web

然后在项目根路径创建一个html文件，并编写如下代码

 async function loadWasm() {
   try {
     const response = await fetch('./pkg/hello_wasm_bg.wasm')
     const module = await WebAssembly.instantiateStreaming(response)
     const instance = module.instance
     // 使用 instance.exports 中的函数
     console.time('rust')
     console.log(instance.exports.fibonacci(20))
     console.timeEnd('rust')
   } catch (err) {
     console.error(err)
   }
 }
 ​
 loadWasm()

当然，如果你觉得麻烦的话，也可以使用编译到处的帮助函数，可以达成同样的效果

 <script type="module">
 ​
   import init, { fibonacci } from './pkg/hello_wasm.js'
 ​
   async function run() {
     await init()
     const result = fibonacci(20)
     console.log(result)
   }
 ​
   run()
 ​
 </script>