前端进阶（十一）-WebAssembly及其他
# WebAssembly
# 编译C/C++为WebAssembly
当你在用C/C++之类的语言编写模块时，你可以使用Emscripten (opens new window)来将它编译到WebAssembly。让我们来看看它是如何工作的。
Emscripten 环境安装 (opens new window)
接下来，您需要通过源码自己编译一个Emscripten。运行下列命令来自动化地使用Emscripten SDK。(在你想保存Emscripten的文件夹下运行
git clone https://github.com/juj/emsdk.git
cd emsdk
# 在 Linux 或者 Mac OS X 上
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 如果在你的macos上获得以下错误
Error: No tool or SDK found by name 'sdk-incoming-64bit'
# 请执行
./emsdk install latest
# 按照提示配置环境变量即可
./emsdk activate latest
# 在 Windows 上
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 注意：Windows 版本的 Visual Studio 2017 已经被支持，但需要在 emsdk install 需要追加 --vs2017 参数。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
安装过程可以会花上一点时间，是时候去休息一下。安装程序会设置所有Emscripten运行所需要的环境变量。
每当您想要使用Emscripten时，尝试从远程更新最新的emscripten代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保您使用的Emscripten一直保持最新。
现在让我们进入emsdk文件夹，输入以下命令来让你进入接下来的流程，编译一个样例C程序到asm.js或者wasm。
# on Linux or Mac OS X
source ./emsdk_env.sh
# on Windows
emsdk_env.bat
2
3
4
5
# 示例：编译C
创建一个c文件(hello.c)
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
2
3
4
5
现在，转到一个已经配置过Emscripten编译环境的终端窗口中，进入刚刚保存hello.c文件的文件夹中，然后运行下列命令：
emcc hello.c -s WASM=1 -o hello.html
下面列出了我们命令中选项的细节：
-s WASM=1— 指定我们想要的wasm输出形式。如果我们不指定这个选项，Emscripten默认将只会生成asm.js (opens new window)。-o hello.html— 指定这个选项将会生成HTML页面来运行我们的代码，并且会生成wasm模块，以及编译和实例化wasm模块所需要的“胶水”js代码，这样我们就可以直接在web环境中使用了。
这个时候在您的源码文件夹应该有下列文件:
hello.wasm二进制的wasm模块代码hello.js一个包含了用来在原生C函数和JavaScript/wasm之间转换的胶水代码的JavaScript文件hello.html一个用来加载，编译，实例化你的wasm代码并且将它输出在浏览器显示上的一个HTML文件
现在使用一个支持 WebAssembly 的浏览器，加载生成的 hello.html 。
如果一切顺利，你应该可以在页面上的 Emscripten 控制台和 浏览器控制台 中看到 "Hello World" 的输出。
恭喜！你已经成功将 C 代码编译成 JavaScript 并且在浏览器中执行了！
自定义html模板
首先，在一个新文件夹中保存以下 C 代码到 hello2.c 中：
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
2
3
4
5
在 emsdk 中搜索一个叫做 shell_minimal.html 的文件，然后复制它到刚刚创建的目录下的 html_template 文件夹。
mkdir html_template
cp ~/emsdk/emscripten/1.38.15/src/shell_minimal.html html_templates
2
现在使用你的Emscripten编译器环境的终端窗口进入你的新目录， 然后运行下面的命令：
emcc -o hello2.html hello2.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html
- 这次使用的选项略有不同：
- 我们使用了
-o hello2.html，这意味编译器将仍然输出 js 胶水代码 和 html 文件。 - 我们还使用了
--shell-file html_template/shell_minimal.html，这指定了您要运行的例子使用 HTML 页面模板。
- 我们使用了
- 下面让我们来运行这个例子。上面的命令已经生成了 hello2.html，内容和我们使用的模板非常相像，只不过多加了一些 js 胶水和加载wasm文件的代码。 在浏览器中打开它，你会看到与上一个例子相同的输出。
调用一个C语言中的函数
如果需要调用一个在 C 语言自定义的函数，你可以使用 Emscripten 中的 ccall() 函数，以及 EMSCRIPTEN_KEEPALIVE 声明 （将你的函数添加到导出函数列表中）
还是首先创建一个C语言文件
#include <stdio.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
#ifdef __cplusplus
extern "C" {
#endif
int EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
printf("我的函数已被调用\n");
}
#ifdef __cplusplus
}
#endif
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
默认情况下，Emscripten 生成的代码只会调用 main() 函数，其它的函数将被视为无用代码。在一个函数名之前添加 EMSCRIPTEN_KEEPALIVE 能够防止这样的事情发生。你需要导入 emscripten.h 库来使用 EMSCRIPTEN_KEEPALIVE。
为了方便起见，现在将 html_template/shell_minimal.html 也添加到这一目录（但在实际开发环境中你肯定需要将其放到某一特定位置）
运行以下命令编译：(注意由于使用ccall函数，需要添加指定参数)
emcc -o hello3.html hello3.c -O3 -s WASM=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file html_template/shell_minimal.html
如果你在浏览器中在此加载实例，你将看到和之前相同的结果。
现在我们需要运行新的 myFunction() JavaScript 函数。首先，按照以下实例添加一个button, 就在 <script type='text/javascript'> 开头标签之前。
<button class="mybutton">运行我的函数</button>
<script>
document.querySelector('.mybutton').addEventListener('click', function(){
alert('检查控制台');
var result = Module.ccall('myFunction', // name of C function
null, // return type
null, // argument types
null); // arguments
});
</script>
2
3
4
5
6
7
8
9
10
以上就是如何使用 ccall() 调用导出的函数的方式。