文章分享

Emscripten 是一個(gè) 開(kāi)源的編譯器 ，該編譯器可以將 C/C++ 的代碼編譯成 JavaScript 膠水代碼。 Emscripten 可以將 C/C++ 代碼編譯為 WebAssembly 編程語(yǔ)言的代碼。

Emscripten 的底層是基于 LLVM 編譯器的，可以查看其開(kāi)源的 emscripten llvm 和 emscripten clang 。

下圖是其編譯 C/C++ 的代碼的流程圖：

截止本文發(fā)布， Emscripten 最新版本是 1.38.27 .

安裝條件

以下是我安裝和使用 Emscripten 的條件。

macOS 版本 10.14

Git，可通過(guò) Homebrew 安裝

CMake，可通過(guò) Homebrew 安裝

Xcode 10.1

Python 2.7.x，Mac 系統(tǒng)自帶

穩(wěn)定快速的網(wǎng)絡(luò)環(huán)境，最重要和最關(guān)鍵的的是要有(neng)梯(fan)子(qiang)

解決問(wèn)題的態(tài)度和毅力

通過(guò) emsdk 安裝

安裝 Emscripten 可以通過(guò)安裝 emscripten SDK 來(lái)完成， emscripten SDK 可以簡(jiǎn)單的理解為是 Emscripten 的一套 工具 鏈。

在你自己的電腦上面任意新建一個(gè)目錄，如我的 ~/dev/emscwork ，打開(kāi)終端，進(jìn)入此目錄。

1、下載 emsdk

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

2、進(jìn)入 emsdk 目錄

cd emsdk

3、開(kāi)始安裝

# 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 terminalsource ./emsdk_env.sh

注意: 每次更新完 emsdk 后，依舊需要執(zhí)行上面命令重新安裝和激活。

另外一個(gè)比較常用的是 ./emsdk update-tags 這個(gè)命令，可以直接更新 emsdk 的最新 tags 版本，更新 tags 完成后，重新安裝和激活最新版的 emsdk 套件。

配置 emsdk

如果你想在任意路徑下都可以使用 emsdk 里面的各種工具(就是一些二進(jìn)制可執(zhí)行文件)，需要為其設(shè)置環(huán)境變量。

編輯 ~/.bash_profile 文件，新增如下代碼:

export EMSDK=~/emscwork/emsdkexport EMSCRIPTEN=$EMSDK/emscripten/1.38.27export BINARYEN_ROOT=$EMSDK/binaryen/master_64bit_binaryenexport PATH=$EMSDK:$EMSCRIPTEN:$BINARYEN_ROOT:$PATH

執(zhí)行下面命令, 使剛配置的文件生效。

source ~/.bash_profile

至此，安裝和設(shè)置環(huán)境變量完成。

可以使用下面命令來(lái)查看 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 是一個(gè)可執(zhí)行腳本，該腳本在 emsdk/emscripten/1.38.27 目錄下。

emcc --help

上面命令可以查看更多關(guān)于 emcc 的使用方法.

編譯 C/C++ 代碼

這里舉個(gè)實(shí)際的例子。

main.c

#include<stdio.h>
int main(int argc, char ** argv){
    printf("Emscripten show in browser...
");
}

使用 emcc 編譯，如下：

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

這里一定要注意 WASM=1 這個(gè)選項(xiàng)，否則生成的格式

生成另外三個(gè)文件如下：

mz.html  mz.js  mz.wasm

簡(jiǎn)單介紹一下這三個(gè)文件

1、mz.wasm

二進(jìn)制的 wasm 模塊代碼

2、mz.js

膠水代碼，包含了原生 C 函數(shù)和 JavaScript/wasm 之間轉(zhuǎn)換的 JS 文件

3、mz.html

用來(lái)加載、編譯和實(shí)例化 wasm 代碼并且將其輸出在瀏覽器顯示上的 HTML 文件

最后執(zhí)行下面的命令，可以在 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

同樣的方式編譯和運(yùn)行 mzcpp.html 即可看到同樣的效果。

Emscripten 應(yīng)用場(chǎng)景

Emscripten 只是一個(gè)編譯器，能將我們的高級(jí)語(yǔ)言編譯為瀏覽器可以識(shí)別并運(yùn)行的程序，這個(gè)看起來(lái)確實(shí)很誘人。

就目前來(lái)說(shuō)，Emscripten 應(yīng)用場(chǎng)景可以使用在安全和游戲上面。

1、安全

C/C++ 代碼經(jīng)過(guò)編譯之后，會(huì)生成 wasm 格式 的二進(jìn)制文件，這個(gè)安全級(jí)別較高，即使在瀏覽器中運(yùn)行，破解者也不會(huì)很輕松的破解代碼，這樣一些在 JS 中涉及到安全的問(wèn)題，可以使用 C/C++ 來(lái)寫(xiě)結(jié)合一些加密技術(shù)，然后用 Emscripten 編譯。

2、游戲

如果能把用 C/C++ 語(yǔ)言寫(xiě)的游戲，轉(zhuǎn)為可在瀏覽器直接運(yùn)行的H5游戲，那就很美好了，用戶不需要下載游戲，直接玩?，F(xiàn)代瀏覽器技術(shù)的更新和發(fā)展已經(jīng)讓這個(gè)想法變成了現(xiàn)實(shí)，至少在主流的瀏覽器上面。