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 已安装测试完成。

相关推荐
Moonbit20 小时前
安装Wasm版的MoonBit工具链
后端·node.js·webassembly
ftpeak8 天前
《WebAssembly指南》第九章:WebAssembly 导入全局字符串常量
开发语言·rust·wasm
PegasusYu16 天前
Electron使用WebAssembly实现CRC-16 CCITT-FALSE校验
electron·nodejs·wasm·webassembly·crc16·crc-16·ccitt false
技术猿188702783511 个月前
PHP 与 WebAssembly 的 “天然隔阂”
开发语言·php·wasm
小猪猪屁1 个月前
WebAssembly 从零到实战:前端性能革命完全指南
前端·vue.js·webassembly
早起的年轻人1 个月前
Flutter WebAssembly (Wasm) 支持 - 实用指南Flutter WebAssembly (Wasm) 支持 - 实用指南
flutter·wasm
pepedd8641 个月前
WebAssembly简单入门
前端·webassembly·trae
受之以蒙1 个月前
Rust & WebAssembly 实践:构建一个简单实时的 Markdown 编辑器
笔记·rust·webassembly
wayhome在哪1 个月前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
yangholmes88881 个月前
EMSCRIPTEN File System 入门
前端·webassembly