WebAssembly编译之(2)-Ubuntu搭建WASM编译环境

引言

上一节我们介绍了WebAssembly及asm.js的原理,我们继续介绍在Linux下如何搭建WASM编译环境

WebAssembly编译之(1)-asm.js及WebAssembly原理介绍

Ubuntu下搭建WASM环境

开发环境

系统:ubuntu20.04
g++:g++ (Ubuntu 9.4.0-1ubuntu1~20.04.1) 9.4.0
node:v18.13.0

WASM安装

step.1 依赖py安装

WASM依赖与py,我们先安装py环境

# Install Python
sudo apt-get install python3

我们看一下py3的版本

$ python3 --version
Python 3.8.10

core Emscripten SDK是依赖py脚本驱动的

step.2 下载emsdk

使用emsdk是官方推荐的安装方式,我们先下载emsdk仓库

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

官方的仓库总是慢,这里推荐另外一个国内镜像库
https://gitee.com/openeuler-graphics/emsdk

step.3 更新emsdk

我们先进入上一步下载的git仓库目录,执行下面的脚本

# Enter the emsdk dir
cd emsdk

# 获取最新的emsdk版本,当然你刚下载的话可以不做任何代码更新
git pull

# 执行下载安装脚本 开始下载安装最新的emsdk
# 注意原来的mater改为了main,所以需要git checkout main
./emsdk install latest 

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

# 激活环境变量
source ./emsdk_env.sh

当然,如果你想安装其他版本的emsdk,可以这样./emsdk install 1.38.45

step.4 测试验证Emscripten环境

使用emcc查看一下安装的Emscripten的版本

emcc是emscripten编译器的命令工具

$ emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.22 (a9981ae2a7dc3c45f833d0b2202f739d87ac05c8)
clang version 16.0.0 (https://github.com/llvm/llvm-project 8491d01cc385d08b8b4f5dd097239ea0009ddc63)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /home/emsdk/upstream/bin

写一段c++代码测试一下

main.cpp

// main.cpp
#include <stdio.h>

int main() {
    
    
  printf("hello, world!\n");
  return 0;
}

我们先用g++编译一下

# 编译
$ g++ main.cpp -o main
# 编译成功,执行main
$ ./main
hello, world!

编译成功,并执行main程序,顺利输出hello,world

接着我在尝试一下使用emcc编译一下

$ emcc main.cpp -o main.js

输出两个文件main.jsmain.wasm;我们使用node尝试执行一下

其中main.js为胶水代码,main.wasm为实际的内容

$ node main.js
hello, world!

执行成功!

需要注意的是,自1.38.1起,Emscripten默认的编译目标切换为WebAssembly。如果仍然需要以asm.js为编译目标,需要在调用emcc时添加-s WASM=0参数,如下所示:

$ emcc main.cpp -s WASM=0 -o main.js

这样只有一个文件main.js输出,这个文件即为asm.js

再尝试一下直接输出HTML

emcc main.cpp -o main.html

编译成功,我们可以用nginx快速搭建一个web服务,把生成的main.htmlmain.js放在web服务器的目录下

我们用浏览器打开,下面可以看到`hello,world!`

![在这里插入图片描述](https://img-blog.csdnimg.cn/15f9b02fc2564ff098c5e7cb99e942e7.png)至此我们完成了Ubuntu下的WebAssembly的编译环境搭建!

>下一节我们继续WASM更复杂的编译模式

>参考资料
>[WebAssembly编译之(1)-asm.js及WebAssembly原理介绍](https://blog.csdn.net/youlinhuanyan/article/details/128758925)
> [Emscripten官方资料](https://emscripten.org/docs/getting_started/downloads.html)

猜你喜欢

转载自blog.csdn.net/youlinhuanyan/article/details/128760145