了解 Emscripten

Emscripten 是一个 开源的编译器 ，该编译器可以将 C/C++ 的代码编译成 JavaScript 胶水代码。 Emscripten 可以将 C/C++ 代码编译为 WebAssembly 编程语言的代码。

Emscripten 的底层是基于 LLVM 编译器的，可以查看其开源的 emscripten llvm 和 emscripten clang 。

下图是其编译 C/C++ 的代码的流程图：

截止本文发布， Emscripten 最新版本是 1.38.27 .

安装条件

以下是我安装和使用 Emscripten 的条件。

• macOS 版本 10.14
• Git，可通过 Homebrew 安装
• CMake，可通过 Homebrew 安装
• Xcode 10.1
• Python 2.7.x，Mac 系统自带
• 稳定快速的网络环境，最重要和最关键的的是要有(neng)梯(fan)子(qiang)
• 解决问题的态度和毅力

通过 emsdk 安装

安装 Emscripten 可以通过安装 emscripten SDK 来完成， emscripten SDK 可以简单的理解为是 Emscripten 的一套 工具 链。

在你自己的电脑上面任意新建一个目录，如我的 ~/dev/emscwork ，打开终端，进入此目录。

1、下载 emsdk

git clone https://github.com/juj/emsdk.git

2、进入 emsdk 目录

cd emsdk

3、开始安装

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

注意: 每次更新完 emsdk 后，依旧需要执行上面命令重新安装和激活。

另外一个比较常用的是 ./emsdk update-tags 这个命令，可以直接更新 emsdk 的最新 tags 版本，更新 tags 完成后，重新安装和激活最新版的 emsdk 套件。

配置 emsdk

如果你想在任意路径下都可以使用 emsdk 里面的各种工具(就是一些二进制可执行文件)，需要为其设置环境变量。

编辑 ~/.bash_profile 文件，新增如下代码:

export EMSDK=~/emscwork/emsdk
export EMSCRIPTEN=$EMSDK/emscripten/1.38.27
export BINARYEN_ROOT=$EMSDK/binaryen/master_64bit_binaryen
export PATH=$EMSDK:$EMSCRIPTEN:$BINARYEN_ROOT:$PATH

执行下面命令, 使刚配置的文件生效。

source ~/.bash_profile

至此，安装和设置环境变量完成。

可以使用下面命令来查看 emsdk 的安装情况。

emcc --version

emcc (Emscripten gcc/clang-like replacement) 1.38.27 (commit ea5d631a5446632e195765d89a53ead71cd6de45)
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 是一个可执行脚本，该脚本在 emsdk/emscripten/1.38.27 目录下。

emcc --help

上面命令可以查看更多关于 emcc 的使用方法.

编译 C/C++ 代码

这里举个实际的例子。

main.c

#include<stdio.h>

int main(int argc, char ** argv)
{
    printf("Emscripten show in browser...\n");
}

使用 emcc 编译，如下：

emcc main.c -s WASM=1 -o mz.html

这里一定要注意 WASM=1 这个选项，否则生成的格式

生成另外三个文件如下：

mz.html  mz.js  mz.wasm

简单介绍一下这三个文件

1、mz.wasm

二进制的 wasm 模块代码

2、mz.js

胶水代码，包含了原生 C 函数和 JavaScript/wasm 之间转换的 JS 文件

3、mz.html

用来加载、编译和实例化 wasm 代码并且将其输出在浏览器显示上的 HTML 文件

最后执行下面的命令，可以在 Safari 浏览器中显示效果

emrun mz.html

main.cpp

#include<iostream>

using namespace std;

int main(int argc, char ** argv)
{
    cout << "Emscripten show in browser..." << endl;
    
    return 0;
}

编译 C++ 文件(main.cpp)

emcc main.cpp -s WASM=1 -o mzcpp.html

同样的方式编译和运行 mzcpp.html 即可看到同样的效果。

Emscripten 应用场景

Emscripten 只是一个编译器，能将我们的高级语言编译为浏览器可以识别并运行的程序，这个看起来确实很诱人。

就目前来说，Emscripten 应用场景可以使用在安全和游戏上面。

1、安全

C/C++ 代码经过编译之后，会生成 wasm 格式 的二进制文件，这个安全级别较高，即使在浏览器中运行，破解者也不会很轻松的破解代码，这样一些在 JS 中涉及到安全的问题，可以使用 C/C++ 来写结合一些加密技术，然后用 Emscripten 编译。

2、游戏

如果能把用 C/C++ 语言写的游戏，转为可在浏览器直接运行的H5游戏，那就很美好了，用户不需要下载游戏，直接玩。现代浏览器技术的更新和发展已经让这个想法变成了现实，至少在主流的浏览器上面。

推荐大家看看这篇文章 JavaScript是如何工作的：与WebAssembly比较及其使用场景