WebAssembly入门学习（二） Windows系统安装 wasm-pack 编译组件

WebAssembly入门学习系列文章

1. WebAssembly入门学习（一） Windows系统安装Rust语言环境
2. WebAssembly入门学习（二） Windows系统安装wasm-pack WebAssembly编译环境
3. WebAssembly入门学习（三） 实现 WebAssembly 的入门程序 hello world

前言

继上一篇文章之后，花了大概十多天时间，阅读了Rust语言相关书籍，了解了Rust基本语法，本文开始安装 wasm-pack 编译环境（或称为插件？组件？crates？）。

不管怎么称呼，反正此工具就是用来编译 Rust 代码为 WebAssembly 放在浏览器端运行。

Rust 入门推荐阅读：

• Rust 程序设计语言：https://kaisery.github.io/trpl-zh-cn/
• 通过例子学 Rust：https://rustwiki.org/zh-CN/rust-by-example/
• 其他Rust文档：https://rustwiki.org/docs/

必备知识（姿势）

1. 需要对前端有所了解（HTML/JS/nodejs）等
2. 需要对 Rust 语法有所了解

安装方式

本文编写时：

1. wasm-pack 版本最新为 0.12.1
2. 系统环境为 windows 10 64位系统

wasm-pack 官网 https://rustwasm.github.io/wasm-pack/installer/ 截图如下：

官网推荐安装方式有这么几种：

1. Windows环境建议使用wasm-pack-init.exe安装，下载地址：https://github.com/rustwasm/wasm-pack/releases。

2. 其他环境建议使用curl命令安装 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh。

3. rust 使用 cargo 安装 cargo install wasm-pack。

4. nodejs 使用 npm install -g wasm-pack 或者 yarn global add wasm-pack。

遇到问题

1. wasm-pack-init.exe 下载失败，直接无法打开 github 的下载链接（墙的问题）。

2. cargo install wasm-pack 提示 error occurred: Failed to find tool. Is gcc.exe installed? (see https://github.com/rust-lang/cc-rs#compile-time-requirements for help)。
   此命令失败原因大概是：所有依赖包安装完成之后使用 gcc.exe 编译出错，未找到 gcc.exe 这个工具。大概率是需要安装 gcc.exe 这个工具，在此失败之后就没再尝试了。

3. 使用 npm install -g wasm-pack 安装遇到 SyntaxError: Unexpected token 表示语法错误，大概率是需要升级nodejs，出现此问题我本地使用的 nodejs 版本为 10.16.0。

4. 切了版本之后在使用 npm install -g wasm-pack 安装失败，提示 npm ERR! Downloading release from https://github.com/rustwasm/wasm-pack/releases/download/0.121/wam-pack-v0.12.1-X8-64-pc-windows-msvc.tar.gz。
   此外还有一个警告提示 (node:3088)Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes Tls connections and HITPS requests insecure by disabling certificate verification.。此警告表示有个 NODE_TLS_REJECT_UNAUTHORIZED=0 的环境变量配置会导致不安全的https请求。可以用 env 命令查看本机所有环境变量配置，也可以是用 echo $NODE_TLS_REJECT_UNAUTHORIZED查看某一个环境变量配置。

5. 要处理 NODE_TLS_REJECT_UNAUTHORIZED 此警告可以先执行 export NODE_TLS_REJECT_UNAUTHORIZED=1 将本次回话的环境变量设置为1，再使用 npm install -g wasm-pack 安装，结果还是失败。都是（墙的问题）提示github文件下载问题，如果有备有梯子，大概率不会出现此问题。

没有梯子的情况下，如何处理 wasm-pack 安装失败

官方提供的几种安装方式基本都试过了，要不下载失败，要不编译失败，那么该怎么办？

这时候可以考虑使用国内镜像安装，本文使用淘宝镜像https://npmmirror.com/。

1. 安装 cnpm ，执行命令 npm install -g cnpm --registry=https://registry.npmmirror.com。

2. 使用 cnpm 安装 wasm-pack，执行命令 cnpm install -g wasm-pack，终于安装成功，如图：

如果此步骤没出错，那么执行命令 wasm-pack --version 应该有版本号输出

$ wasm-pack --version
wasm-pack 0.12.1

如果正常输出版本号，那么代表我们的 wasm-pack 编译环境正常安装。

接下来可以实现一个 WebAssembly 的 Hello World 打开 WASM 的大门！！

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-09/wasm-pack-install/

如果您觉得文章不错，可以点击文章中的广告支持一下！