Mac 上安装 Emscripten

背景:Web 端需要使用已有的 C++ 库,需要将 C++ 项目编译成 WebAssembly(.wasm) 供 js 调用。

Emscripten 可以将 C++ 编译成 .wasm

一、下载源码

powershell 复制代码
# 下载 emsdk 源码
git clone https://github.com/emscripten-core/emsdk.git

# 下载完成后进入到 emsdk 项目根目录
cd emsdk

二、安装并激活 emsdk 工具

2.1 安装最新版本的 emsdk

powershell 复制代码
# 拉取最新版本的 emsdk (如果是第一次拉取安装就不需要)
git pull

# 下载安装最新版本的 emsdk 工具
./emsdk install latest

# 激活最新版本的 emsdk 工具
./emsdk activate latest

# 在当前命令行窗口启用工具和相关环境变量,如果没配置全局的环境变量(下面的文章会讲到),每新开一个窗口都需要执行一次
source ./emsdk_env.sh

2.2 安装指定版本的 emsdk

powershell 复制代码
# 下载安装最新版本的 emsdk 工具
./emsdk install 3.1.47

# 激活最新版本的 emsdk 工具
./emsdk activate 3.1.47

# 在当前命令行窗口启用工具和相关环境变量,如果没配置全局的环境变量(下面的文章会讲到),每新开一个窗口都需要执行一次
source ./emsdk_env.sh

三、配置全局环境变量

如果不配置全局环境变量,每次新开命令行窗口使用 emsdk 工具时,都需要执行一次 source ./emsdk_env.sh 。配置环境变量后在任何窗口都可以使用,比较方便。

打开环境变量配置文件

powershell 复制代码
vim ~/.zshrc

在后面加入如下信息,即 emsdk 和 emscripten 的安装目录加到 path 中。

powershell 复制代码
export EMSDK_PATH="/Users/AlanWang4523/installs/emsdk"
export EMSCRIPTEN_PATH="/Users/AlanWang4523/installs/emsdk/upstream/emscripten"
export PATH=$PATH:${EMSDK_PATH}
export PATH=$PATH:${EMSCRIPTEN_PATH}

四、测试

4.1 测试工具是否安装好

powershell 复制代码
emcc -v

输出如下则说明 Emscripten 已安装成功

4.2 测试 C++ Demo 编译

写个小 Demo,代码如下,将其保存为 demo.cpp

cpp 复制代码
#include <iostream>
#include <emscripten/emscripten.h>

int main(int argc, const char * argv[]) {
    std::cout << "Hello AlanWang4523\n";
    return 0;
}

进入 demo.cpp 文件所在的目录,将上面的 C++ demo,编译成 wasm 并插入 html 中:

bash 复制代码
emcc demo.cpp -o index.html

编译完成会生成:index.wasm、index.js、index.html 三个文件,如下:

4.3 测试 C++ Demo 在浏览器运行

直接双击刚才编译生成的 index.html 运行会报错,因为浏览器不允许从本地加载 wasm 执行。需要起个 httpServer 来执行。

执行双击 index.html 运行报错如下:

打开命令行工具,进入 index.html 所在目录,然后执行以下命令开启服务:

bash 复制代码
# python -m http.server <端口号>
python -m http.server 9090

服务启动起来后,在浏览器输入以下地址来访问刚才的 index.html

bash 复制代码
http://localhost:9090/
或:
http://0.0.0.0:9090/

运行结果如下:

至此,Emscripten 已安装测试完成。

相关推荐
276695829224 分钟前
东方航空 m端 wasm req res分析
java·python·node·wasm·东方航空·东航·东方航空m端
Jacob02341 天前
为什么现在越来越多项目选择混合开发?从 WebAssembly 在无服务器中的表现说起
架构·rust·webassembly
明天好,会的4 天前
从Spark/Flink到WASM:流式处理框架的演进与未来展望
flink·spark·wasm
狗都不学爬虫_4 天前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
奇舞精选4 天前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
PegasusYu9 天前
Electron使用WebAssembly实现CRC-16 原理校验
javascript·electron·nodejs·wasm·webassembly·crc·crc16
狗都不学爬虫_10 天前
JS逆向 - 滴滴(dd03、dd05)WSGSIG
javascript·爬虫·python·网络爬虫·wasm
狗都不学爬虫_11 天前
JS逆向 - 东、深、昆航查询参数
爬虫·网络爬虫·wasm
王道之矢18 天前
重现 Chrome 经典:用 WebAssembly 打造像素级完美的二维码生成器扩展
chrome·webassembly
一线灵25 天前
跨平台游戏引擎 Axmol-2.7.0 发布
c++·游戏引擎·wasm·axmol·cocos2dx