关于webassembly:emscripten-安装与使用-让C语言出现在前端

63次阅读

共计 2314 个字符,预计需要花费 6 分钟才能阅读完成。

下载安装

官网举荐形式,先下载 emsdk:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
# 下载并装置最新的 SDK 工具.
./emsdk install latest

# 为以后用户激活最新的 SDK. (写入 .emscripten 配置文件)
./emsdk activate latest

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

留神
在 Windows 上运行 emsdk,而不是./emsdk 和,emsdk_env.bat而不是。source ./emsdk_env.sh

会装置 sdk-release-upstream, node.js, 等,因为是从
https://storage.googleapis.com/ 上下载相应的软件包,如果您因网络起因不能间接拜访这个域名,则可能须要设置代理下载。

装置验证

确保已下载并装置 Emscripten(执行此操作的确切办法取决于您的操作系统:Linux,Windows 或 Mac)。

Emscripten 应用 Emscripten 编译器前端(emcc)进行拜访。该脚本调用了构建代码所需的所有其余工具,并且能够代替_gcc_或_clang_等规范编译器。在命令行上应用 ./emcc 或调用它./em++

$ emcc --version
emcc (Emscripten gcc/clang-like replacement) 1.40.1 
...

编译

接下来就能够编译代码啦。
来个万年不变的 Hello world 试试:

#include<stdio.h>

void main(){printf("Hello world!");
}

能够比拟别离以
第一种状况:

emcc hello.c 

和,第二种状况:

emcc -O2 hello.c -o hello.wasm

进行编译,感受一下差别。

第一种状况下

编译默认会生成一个 2500 多行的 JavaScript 文件 a.out.js和一个可反编译成文本 wat 格局的近 1 万行代码的 a.out.wasm 文件. 是太了点,不过不必怕,前面咱们会通知你如何让他们变小。

a.out.js是一坨胶水,用来在不同条件下为 wasm 搭建一个执行环境。先不论他到底是啥,先试试运行看看:

node a.out.js

惋惜,没有人跟你问世界好,相同,向你抛出一团正告:

stdio streams had content in them that was not flushed. you should set EXIT_RUNTIME to 1 (see the FAQ), or make sure to emit a newline when you printf etc.
(this may also be due to not including full filesystem support - try building with -s FORCE_FILESYSTEM=1)

这一坨英文的意思是,编译出的 wasm 默认状况下不会退出运行时,这是 web 状况下期待的形式,主程序 main 尽管运行完结了,但模块没有退出,动态变量能够放弃在内存中,不开释。同时规范 I/O 缓冲区没有被 flush,也就没有看到 Hello world!

听人劝,加参数再编译:

emcc hello.c -s EXIT_RUNTIME=1

而后再用 node.js 运行:

node a.out.js

Hello world!

呈现了期待的 Hello world! 不再出吓人正告了。

预计你会问,我编译的是 hello.c,为啥进去的是 a.out.js?
这还真有点历史传统的滋味,你能够把 a.out 了解成汇编输(assembler output)。这种 *nix 操作系统下的可执行文件也称作 a.out 格局(试比拟 ELF 格局)。

如果你看着不爽的话,上面咱们就看看如何指定本人的名字。

第二种状况

emcc 有两个罕用的编译参数,大小欧(O,o), 大欧 O 指定优化级别,小欧 o 指定输入文件和类型。

优化级别有 -O0, -O1, -O2, -O3 -Os 这五种级别。不指定是为 -O0, 即没有优化,开发时个别指定为 -O0 或 -O1,这样编译速度快,调试不便。正式公布时能够是 -O2 或 -O3,这时代码会优化,执行更快。-Os 不光是执行快,同时优化大小,可生成更小的执行文件。

emcc 小欧 o 选项指定输入文件类型有 js,wasm 和 html。

让咱们来试试生成 html:

emcc -o hello.html hello.c

这回会生成三个文件:hello.html, hello.js, hello.wasm

在当前目录下执行 live-server

live-server

如果你机器上没有 live-server, 能够用 npm install live-server来装置。

live-server 会启动一个 web 服务器,监听本机的 8080 端口,并主动关上浏览器:

点击 hello.html:

显示了两个黑窟窿页面,我的Hello world! 呢?

好吧,页面也有页面的怪癖,printf打印时,同样因为没有刷新缓冲区,没有看到咱们的 Hello world, 减少编译选项:

emcc hello.c -o hello.html -s EXIT_RUNTIME=1

CTRL+C 停掉 live-server, 从新编译,再启 live-server, 再刷页面:

好的,咱们的 Hello world! 熠熠生辉,是那么的可恶!

咱们经验了什么?

咱们装置了 emscripten 编译工具链,把 C 语言写的代码别离移植到了 Node.js 的命令行和 Web 页面各本人执行了一下。

谁说 C 语言不能做前端来着?

不过,眼下还看不出这么折腾有啥用,就让我带一起搞个能阐明问题的用例吧?

你放弃关注,我放弃更新!
学习 WebAssembly 正过后!

正文完
 0