在Windows10搭建WebAssembly开发环境
最近研究WebAssembly技术，准备⽤WebAssembly编译C/C++代码供前端调⽤。⽹上看了很多⽂章，收获很⼤，现在就遇到的问题做⼀个记录。
官⽹关于windows开发环境搭建基本上⼏句话，写的太简单，看来是把每个⼈都当资深程序员了。
初学者估计会看的⼀脸懵。⽹上了很多⽂章，都没有特别详细的操作步骤。由于命令⾏⽤的不熟，再加上有些⽂章说⽤命令安装，数据源来⾃⾕歌，如果没有代理的话可能会下载失败。因此我⼀开始没有使⽤官⽅推荐的⽅法，⽽是了⼀篇⽂章，下载了⽂章中附件emsdk-1.的安装包，安装后点击emsdk_env.bat会⾃动配置环境变量，永久⽣效。编写的⼀个Hello world的C⽂件也成功编译成了如下图所列的⽂件：
emcc hello.c -s WASM=1 -o hello.html
这个安装版的emsdk可以在任意⽬录先打开cmd执⾏编译，因为它已经配置了永久⽣效的系统环境变量。
直接双击打开hello.html，能正常显⽰：
由于我的⽬标是编译C/C++⽣成wasm⽂件，再引⼊到前端，供js调⽤C/C++⾥⾯的⽅法，因此当我再编译⼀个包含⾃定义加法和乘法的math.c的C⽂件在前端调⽤时，代码⼀直报错不到这个wasm⽂件，我确认引⼊wasm⽂件路径没有问题，因为反复尝试了⼗⼏遍，都是报错404不到这个math.wasm。此时我就开始怀疑安装的这个emsdk有问题。
因为官⽹上最新版本编译hello.c⽂件⽣成是这样的：
和我⾃⼰⽣成的明显不⼀样：
因此我下定决⼼，把刚安装的emsdk1.35.0卸载了，重新按照官⽹的步骤安装最新版试试。
由于我第⼀次⽤安装⽂件安装时，它会默认安装在C盘，因此环境变量是⾃动配置C盘路径，卸载时环境变量⼀起被⾃动清除了。
1、依据官⽹步骤，⾸先安装Git（我很早已经安装了），略过。
2、安装windows CMake
3、安装python
4、在电脑的其他盘，我的在D盘，创建⼀个⽬录D:\devEnv\webAssembly。
5、在webAssembly⽬录下cmd窗⼝执⾏下⾯命令：
git clone github/juj/emsdk.git
这个从github上下载很快，1分钟搞定。
windows开发平台6、进⼊下载好的emsdk⽬录，继续cmd安装最新版本（这⼀步就是从⾕歌的⼀个地址下载⽂件，我尝试了很多遍，⼀开始执⾏emsdk install  latest报⽆法连接服务器，1060等错误，试了半天都不⾏，最后⽤下⾯这⾏命令终于成功了）
emsdk install --global latest
7、当安装完成配置好后执⾏激活：
emsdk activate latest
8、配置激活后需要应⽤环境变量（该步操作在每次打开新的cmd窗⼝时都需要执⾏emsdk_env.bat，相当于临时配置。⼿动永久配置到系统的环境变量⾥我还没尝试）
emsdk_env.bat
9、验证是否安装成功
emcc -v 不会报错
emcc --clear-cache 不会报错
注意：由于我没有⼿动配置系统环境变量，以上命令操作只能在D:\devEnv\webAssembly\emsdk下执⾏，其他任何地⽅执⾏都会报命令不到，⽽且编译C/C++⽂件也要在这个⽬录下编译，因为D:\devEnv\webAssembly\emsdk就是编译环境。
⾄此安装完成。可以再尝试编译hello.c⽣成的⽂件如下，和官⽹⼀致。此时不能直接双击打开了，需要⼀个本地服务器来访问hello.html。继续编译math.c，⽣成math.wasm。在前端调⽤math.wasm中的加法和乘法。
安装http服务器 npm install -g serve
cmd启动http服务命令: serve .
浏览器访问⾃⼰写的⼯程⽬录index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
<div id="devTarget" />
</h1>
<script>
/**
* @param {String} path wasm ⽂件路径
* @param {Object} imports 传递到 wasm 代码中的变量
*/
function loadWebAssembly (path, imports = {}) {
return fetch(path)
.then(response => response.arrayBuffer())
.then(buffer => WebAssemblypile(buffer))
.then(module => {
/
/ 开辟内存空间
if (!) {
}
// 创建变量映射表
if (!v.table) {
// 在 MVP 版本中 element 只能是 "anyfunc"
// 创建 WebAssembly 实例
return new WebAssembly.Instance(module, imports);
})
}
//调⽤
loadWebAssembly('./math.wasm')
.then(instance => {
const add = ports.add; //取出c⾥⾯的⽅法
const square = ports.square; //取出c⾥⾯的⽅法
let span = ateElement('span');
let htmlStr = '10 + 20 = ' + add(10, 20);
htmlStr += '; 3 * 3 = ' + square(3);
span.innerHTML = htmlStr;
let div = ElementById('devTarget');
div.appendChild(span);
console.log('10 + 20 =', add(10, 20));
console.log('3*3 =', square(3));
console.log('(2 + 5)*2 =', square(add(2 + 5)));
})
</script>
</body>
</html>
其中index.html中调⽤math.wasm中的加法和乘法，在页⾯显⽰出
参考⽂章链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。