在Windows10搭建WebAssembly开发环境

最近研究WebAssembly技术，准备用WebAssembly编译C/C++代码供前端调用。网上看了不少文章，收获很大，如今就遇到的问题作一个记录。

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

https://emscripten.org/docs/getting_started/downloads.html

 

初学者估计会看的一脸懵。网上找了不少文章，都没有特别详细的操做步骤。因为命令行用的不熟，再加上有些文章说用命令安装，数据源来自谷歌，若是没有代理的话可能会下载失败。所以我一开始没有使用官方推荐的方法，而是找了一篇文章，下载了文章中附件emsdk-1.35.0-full-64bit.exe的安装包，安装后的功能基本正常，编写的一个Hello world的C文件也成功编译成了以下图所列的文件：

 

 直接双击打开hello.html，能正常显示：

 

 

因为个人目的是编译C/C++生成wasm文件，再引入到前端，用js调用C/C++里面的方法，所以当我再编译一个包含自定义方法的math.c的C文件在前端调用时，代码一直报错找不到这个wasm文件，此时我就开始怀疑安装的这个emsdk是否有问题。

由于官网上最新版本编译hello.c文件生成是这样的：

 

 与我上面贴的本身生成的明显不同。所以下定决心，把刚安装的emsdk1.35.0卸载了，从新按照官网的步骤安装最新版试试。

因为我第一次用安装文件安装时，它会默认安装在C盘，所以环境变量是自动配置的C盘路径，卸载时环境变量一块儿被自动清除了。

一、依据官网步骤，首先安装Git（我很早已经安装了），略过。

二、在电脑的其余盘，个人在D盘，建立一个目录D:\devEnv\webAssembly。

三、在webAssembly目录下cmd窗口执行下面命令：

     git clone https://github.com/juj/emsdk.git

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

四、进入下载好的emsdk目录，继续cmd安装最新版本（这一步就是从谷歌的一个地址下载文件，我尝试了不少遍，一开始执行emsdk install  latest报没法链接服务器，1060等错误，试了半天都不行，最后用下面这行命令终于成功了）

emsdk install --global latest

五、当安装完成配置好后执行激活：

emsdk activate latest

六、配置激活后须要应用环境变量（该步操做在每次打开新的cmd窗口时都须要执行emsdk_env.bat，至关于临时配置。手动永久配置到系统的环境变量里我还没尝试）

emsdk_env.bat

七、验证是否安装成功

emcc -v 不会报错
emcc --clear-cache 不会报错

至此安装完成。能够再尝试编译hello.c生成的文件以下，和官网一致。打开显示正常。

继续编译math.c，在前端调用加法和乘法，成功！

 

 参考文章连接：

https://www.cnblogs.com/jixiaohua/p/10424941.html

https://blog.csdn.net/wangx893175022/article/details/106209322/