Windows安装Emscripten教程,编译WASM

372 阅读2分钟

Emscripten是一个开源的编译器。他可以把C/C++,Rust等语言编译成WebAssembly,然后在前端使用。

1.安装python环境

Emscripten依赖python进行编译,所以必须安装。请安装最新版 www.python.org/downloads/

image.png

以自动添加环境变量的方式进行安装,省去手动配置的麻烦

image.png

企业微信截图_17479854693992.png

企业微信截图_17479858805066.png

image.png

查看是否安装成功

image.png

2.使用git拉取emsdk

与其他编译器有点不同,不是下载一个包或者程序运行,他是下载源代码,然后run这个源代码。Emscripten SDK (emsdk) 驱动程序是一个 Python 脚本,所以我们在之前要先有python环境

git clone https://github.com/emscripten-core/emsdk.git

image.png

cd emsdk

image.png

2.1 获取最新版本的emsdk(第一次克隆时可以不需要)

git pull

image.png

2.2 下载并安装最新的SDK工具

emsdk.bat install latest

image.png

2.3 为当前用户激活最新SDK(写入.emscripten文件)

emsdk.bat activate latest

image.png

emcc -v // 查看是否激活成功

image.png

2.4 激活当前终端中的PATH和其他环境变量

emsdk_env.bat

image.png

2.5 配置永久环境变量

看这句话提示,我们可以使用 --permanent 指令永久激活

image.png

emsdk.bat activate latest --permanent

永久激活后,我发现在其他cmd中输入emcc -v 没有用,操作了半天没解决问题,后来突然想到应该要重启,环境变量可能才会生效,重启后果然成功(emsdk.bat activate latest --permanent 后的相关cmd界面展示忘记截图了,重启已经来不及截图了就略过)

image.png

3.编译c++成wasm

打开上一篇文章 配置vsCode进行C++开发 中写的代码进行编译

image.png

输入 emcc helloworld.cpp 进行编译,成功后会生成两个文件,a.out.js 和 a.out.wasm ,用node运行a.out.js可以看到c++代码写的log输出内容

image.png

4.最简单的使用wasm

写一个html,通过script标签引入a.out.js胶水代码

image.png

使用live-server跑起来查看这个页面,可以看到打印的信息

image.png

我们发现,什么代码都不用写,这个.js胶水代码帮我们运行了.wasm