WebAssembly 上手

环境配置通过官方WebAssembly-Developer’sGuide提供的安装配置步骤进行环境相关设置。这里以macOS为例。下载工具链通过cloneemscripten仓库到本地进行工具链(toolchain)的下载安装。$gitclonehttps://github.com/emscripten-core/emsdk.git$cdemsdk安装及配置执行安装:$./emsdkinstall...

WebAssembly 上手

环境配置

通过官方 WebAssembly - Developer’s Guide 提供的安装配置步骤进行环境相关设置。这里以 macOS 为例。

下载工具链

通过 clone emscripten 仓库到本地进行工具链(toolchain)的下载安装。

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

安装及配置

执行安装:

$ ./emsdk install latest

激活工具链,生成相应环境配置:

$ ./emsdk activate latest
`./emsdk activate latest` 命令的输出
$ ./emsdk activate latestWriting .emscripten configuration file to user home directory /Users/wayou/The Emscripten configuration file /Users/wayou/.emscripten has been rewritten with the following contents:import osLLVM_ROOT = '/Users/wayou/dev/emsdk/fastcomp/fastcomp/bin'BINARYEN_ROOT = '/Users/wayou/dev/emsdk/fastcomp'NODE_JS = '/Users/wayou/dev/emsdk/node/8.9.1_64bit/bin/node'SPIDERMONKEY_ENGINE = ''V8_ENGINE = ''TEMP_DIR = '/var/folders/qr/dlqjq3zj10xgf2xfx3mybn500000gn/T'COMPILER_ENGINE = NODE_JSJS_ENGINES = [NODE_JS]To conveniently access the selected set of tools from the command line, consider adding the following directories to PATH, or call 'source ./emsdk_env.sh' to do this for you./Users/wayou/dev/emsdk:/Users/wayou/dev/emsdk/fastcomp/emscripten:/Users/wayou/dev/emsdk/node/8.9.1_64bit/binSet the following tools as active:releases-fastcomp-3b8cff670e9233a6623563add831647e8689a86b-64bitnode-8.9.1-64bit

小贴士:其中 install 过程会从 https://chromium.googlesource.comhttps://storage.googleapis.comhttps://s3.amazonaws.com 域下载东西,所以最好在命令行配置相应代理,否则安装会失败。

环境变量

通过执行以下命令添加相应命令及目录到环境变量以方便调用:

$ source ./emsdk_env.sh --build=Release

如果进行到这一步发生如下错误:

$ source ./emsdk_env.sh --build=Release./emsdk_env.sh (line 19): Missing end to balance this if statementif [ "$SRC" = "" ]; then^from sourcing file ./emsdk_env.sh called on standard inputsource: Error while reading file './emsdk_env.sh'

这多半是因为你用的 shell 是 fish 语法不兼容的原因。

两个解决办法:

  • 可通过来自emscripten-core/emsdk issue#111 中提供的方法,执行下面的命令来绕开:
$ bash ./emsdk_env.sh
  • 因为其也提供了对应的 .fish 脚本,所以,也可以直接选择运行该 fish 脚本来解决上面语法报错的问题:
$ source ./emsdk_env.fish

执行成功的输出:

$ source ./emsdk_env.fishAdding directories to PATH:PATH  = /Users/wayou/dev/emsdkSetting environment variables:EMSDK = /Users/wayou/dev/emsdkEM_CONFIG = /Users/wayou/.emscripten

检查安装

完成上面步骤后,可通过运行 emcc --version 命令查看是否安装成功:

$ emcc --version
`emcc --version` 命令的输出
$ emcc --versioncache:INFO: generating system asset: is_vanilla.txt... (this will be cached in "/Users/wayou/.emscripten_cache/is_vanilla.txt" for subsequent builds)cache:INFO:  - okemcc (Emscripten gcc/clang-like replacement) 1.38.33 (commit 0490c5f7aaf0e61aafd3b4cfe22cc56b803026b1)Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)This is free and open source software under the MIT license.There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

小贴士:新开命令行窗口或重启命令行后,需要重新执行 source 命令,可将其添加到你所使用的命令行的配置文件中,.bash_profile.zshrc,或 .

以 fish 为例:

~/.config/fish/config.fish.fish

source "/Users/wayou/dev/emsdk/emsdk_env.fish";

这样每次启动命令行后 emcc 都是可用状态。

编译及运行

安装配置完成后,便可以尝试编译并运行一个简单的 demo 程序了。

一些注意点:

  • 运行 emcc 时需要指定 -s WASM=1 参数,否则情况下其输出为 asm.js
  • 除了生成 Wasm 二进制文件及对应的 JavaScript 封装,如果还想要生成一个可直接查看的 HTML 页面,可在输出时指定一个后缀为 .html 的文件。
  • 实际运行时不能直接打开这个生成的 HTML 文件,因为 file:/// 协议不支持跨域,所以需要本地启一个服务器来查看。

编写 Hello World

创建 hello.c 文件并输出以下内容:

hello.c

#include <stdio.h>int main(int argc, char ** argv) {  printf("Hello, world!\n");}

编译

执行以下命令进行编译:

$ emcc hello.c -s WASM=1 -o hello.html

运行

通过工具链中提供的 smrun 来开启一个本地服务器以查看刚刚生成的程序:

$ emrun --no_browser --port 8080 .

当然,使用其他任意 server 也是可以的,比如 Python 的:

$ python -m http.server 8080

启动成功后浏览器访问 http://localhost:8080/hello.html。不出意外你会看到页面中 Emscripten 的控制台展示了 Hello, world!

WebAssembly Hello Wrold 运行效果

WebAssembly Hello Wrold 运行效果

相关资源

  • WebAssembly - Developer’s Guide
源文地址:https://www.guoxiongfei.cn/cntech/18398.html
0