2023年11月26日发(作者：)

在Windows10搭建WebAssembly开发环境

最近研究WebAssembly技术，准备⽤WebAssembly编译C/C++代码供前端调⽤。⽹上看了很多⽂章，收获很⼤，现在就遇到的问题做⼀个

记录。

官⽹关于windows开发环境搭建基本上⼏句话，写的太简单，看来是把每个⼈都当资深程序员了。

初学者估计会看的⼀脸懵。⽹上找了很多⽂章，都没有特别详细的操作步骤。由于命令⾏⽤的不熟，再加上有些⽂章说⽤命令安装，数据源

来⾃⾕歌，如果没有代理的话可能会下载失败。因此我⼀开始没有使⽤官⽅推荐的⽅法，⽽是找了⼀篇⽂章，下载了⽂章中附件emsdk-

的安装包，安装后点击emsdk_会⾃动配置环境变量，永久⽣效。编写的⼀个Hello world的C⽂件也成功编译成

了如下图所列的⽂件：

emcc hello.c -s WASM=1 -o

这个安装版的emsdk可以在任意⽬录先打开cmd执⾏编译，因为它已经配置了永久⽣效的系统环境变量。

直接双击打开，能正常显⽰：

由于我的⽬标是编译C/C++⽣成wasm⽂件，再引⼊到前端，供js调⽤C/C++⾥⾯的⽅法，因此当我再编译⼀个包含⾃定义加法和乘法的

math.c的C⽂件在前端调⽤时，代码⼀直报错找不到这个wasm⽂件，我确认引⼊wasm⽂件路径没有问题，因为反复尝试了⼗⼏遍，都是报

错404找不到这个。此时我就开始怀疑安装的这个emsdk有问题。

因为官⽹上最新版本编译hello.c⽂件⽣成是这样的：

和我⾃⼰⽣成的明显不⼀样：

因此我下定决⼼，把刚安装的emsdk1.35.0卸载了，重新按照官⽹的步骤安装最新版试试。

由于我第⼀次⽤安装⽂件安装时，它会默认安装在C盘，因此环境变量是⾃动配置C盘路径，卸载时环境变量⼀起被⾃动清除了。

1、依据官⽹步骤，⾸先安装Git（我很早已经安装了），略过。

2、安装windows CMake

3、安装python

4、在电脑的其他盘，我的在D盘，创建⼀个⽬录D:devEnvwebAssembly。

5、在webAssembly⽬录下cmd窗⼝执⾏下⾯命令：

git clone /juj/

这个从github上下载很快，1分钟搞定。

6、进⼊下载好的emsdk⽬录，继续cmd安装最新版本（这⼀步就是从⾕歌的⼀个地址下载⽂件，我尝试了很多遍，⼀开始执⾏emsdk

install latest报⽆法连接服务器，1060等错误，试了半天都不⾏，最后⽤下⾯这⾏命令终于成功了）

emsdk install --global latest

7、当安装完成配置好后执⾏激活：

emsdk activate latest

8、配置激活后需要应⽤环境变量（该步操作在每次打开新的cmd窗⼝时都需要执⾏emsdk_，相当于临时配置。⼿动永久配置到系统

的环境变量⾥我还没尝试）

emsdk_

9、验证是否安装成功

emcc -v 不会报错

emcc --clear-cache 不会报错

注意：由于我没有⼿动配置系统环境变量，以上命令操作只能在D:devEnvwebAssemblyemsdk下执⾏，其他任何地⽅执⾏都会报命令找

不到，⽽且编译C/C++⽂件也要在这个⽬录下编译，因为D:devEnvwebAssemblyemsdk就是编译环境。

⾄此安装完成。可以再尝试编译hello.c⽣成的⽂件如下，和官⽹⼀致。此时不能直接双击打开了，需要⼀个本地服务器来访问。

继续编译math.c，⽣成。在前端调⽤中的加法和乘法。

安装http服务器 npm install -g serve

cmd启动http服务命令: serve .

浏览器访问⾃⼰写的⼯程⽬录