Emscripten是一个开源的编译器。他可以把C/C++,Rust等语言编译成WebAssembly,然后在前端使用。
1.安装python环境
Emscripten依赖python进行编译,所以必须安装。请安装最新版 www.python.org/downloads/
以自动添加环境变量的方式进行安装,省去手动配置的麻烦
查看是否安装成功
2.使用git拉取emsdk
与其他编译器有点不同,不是下载一个包或者程序运行,他是下载源代码,然后run这个源代码。Emscripten SDK (emsdk) 驱动程序是一个 Python 脚本,所以我们在之前要先有python环境
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
2.1 获取最新版本的emsdk(第一次克隆时可以不需要)
git pull
2.2 下载并安装最新的SDK工具
emsdk.bat install latest
2.3 为当前用户激活最新SDK(写入.emscripten文件)
emsdk.bat activate latest
emcc -v // 查看是否激活成功
2.4 激活当前终端中的PATH和其他环境变量
emsdk_env.bat
2.5 配置永久环境变量
看这句话提示,我们可以使用 --permanent 指令永久激活
emsdk.bat activate latest --permanent
永久激活后,我发现在其他cmd中输入emcc -v 没有用,操作了半天没解决问题,后来突然想到应该要重启,环境变量可能才会生效,重启后果然成功(emsdk.bat activate latest --permanent 后的相关cmd界面展示忘记截图了,重启已经来不及截图了就略过)
3.编译c++成wasm
打开上一篇文章 配置vsCode进行C++开发 中写的代码进行编译
输入 emcc helloworld.cpp 进行编译,成功后会生成两个文件,a.out.js 和 a.out.wasm ,用node运行a.out.js可以看到c++代码写的log输出内容
4.最简单的使用wasm
写一个html,通过script标签引入a.out.js胶水代码
使用live-server跑起来查看这个页面,可以看到打印的信息
我们发现,什么代码都不用写,这个.js胶水代码帮我们运行了.wasm