WebAssembly 上手
安装Mac 上最便捷的安装方式当然是通过 Homebrew: $ brew install emscripten
安装好之后讲道理就已经自动配置好一切,然后 下面看非 Homebrew 安装的方式。 通过官方 WebAssembly - Developer’s Guide 提供的安装配置步骤进行环境相关设置。这里以 macOS 为例。 下载工具链通过 clone emscripten 仓库到本地进行工具链(toolchain)的下载安装。 $ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
安装及配置执行安装: 激活工具链,生成相应环境配置: $ ./emsdk activate latest
`./emsdk activate latest` 命令的输出
小贴士:其中 install 过程会从 环境变量通过执行以下命令添加相应命令及目录到环境变量以方便调用: $ source ./emsdk_env.sh --build=Release
如果进行到这一步发生如下错误: $ source ./emsdk_env.sh --build=Release
./emsdk_env.sh (line 19): Missing end to balance this if statement
if [ "$SRC" = "" ]; then
^
from sourcing file ./emsdk_env.sh
called on standard input
source: Error while reading file './emsdk_env.sh'
这多半是因为你用的 shell 是 fish 语法不兼容的原因。 两个解决办法:
$ bash ./emsdk_env.sh
$ source ./emsdk_env.fish
执行成功的输出: $ source ./emsdk_env.fish
Adding directories to PATH:
PATH += /Users/wayou/dev/emsdk
Setting environment variables:
EMSDK = /Users/wayou/dev/emsdk
EM_CONFIG = /Users/wayou/.emscripten
检查安装完成上面步骤后,可通过运行 $ emcc --version
`emcc --version` 命令的输出
$ emcc --version
cache:INFO: generating system asset: is_vanilla.txt... (this will be cached in "/Users/wayou/.emscripten_cache/is_vanilla.txt" for subsequent builds)
cache:INFO: - ok
emcc (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.
如果执行 $ emcc --version
emscripten requires python 2.7.12 or above
大概率是 macOS 自带的是老版本的 Python2,而 尝试过在命令的配置文件中添加 alias emcc="python3 /Users/wayou/Documents/dev/github/emsdk/fastcomp/emscripten/emcc"
alias em++="python3 /Users/wayou/Documents/dev/github/emsdk/fastcomp/emscripten/em++"
alias emrun="python3 /Users/wayou/Documents/dev/github/emsdk/fastcomp/emscripten/emrun"
根据官方文档的描述:
这里同时也将 小贴士:新开命令行窗口或重启命令行后,需要重新执行 以 fish 为例: ~/.config/fish/config.fish.fish source "/Users/wayou/dev/emsdk/emsdk_env.fish";
这样每次启动命令行后 编译及运行安装配置完成后,便可以尝试编译并运行一个简单的 demo 程序了。 一些注意点:
编写 Hello World创建 hello.c #include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello, world!\n");
}
编译执行以下命令进行编译: $ emcc hello.c -s WASM=1 -o hello.html
运行通过工具链中提供的 $ emrun --no_browser --port 8080 .
当然,使用其他任意 server 也是可以的,比如 Python 的: $ python -m http.server 8080
启动成功后浏览器访问 http://localhost:8080/hello.html。不出意外你会看到页面中 Emscripten 的控制台展示了 WebAssembly Hello Wrold 运行效果 但用 调用 C++ 中的方法下面来看如何在 JavaScript 中调用 C++ 定义的方法。 默认情况下,Emscripten 编译后的代码只包含 将以下代码放入 #include <stdio.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
#ifdef __cplusplus
extern "C" {
#endif
void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
printf("MyFunction Called\n");
}
#ifdef __cplusplus
}
#endif
此时编译需要加上 执行以下命令编译代码: $ emcc -o hello3.html hello3.c -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"
打开在发生的 <button class="mybutton">Run myFunctionbutton>
添加以下点击调用逻辑到第一个 document.querySelector(".mybutton").addEventListener("click", function() {
alert("check console");
var result = Module.ccall(
"myFunction", // name of C function
null, // return type
null, // argument types
null // arguments
);
});
再次启动服务器运行后,点击页面中按钮在控制台观察输出。 JavaScript 中调用 C++ 方法的示例 相关资源
|