Emscripten 是一個(gè) 開(kāi)源的編譯器
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游戲，那就很美好了，用戶不需要下載游戲，直接玩。現(xiàn)代瀏覽器技術(shù)的更新和發(fā)展已經(jīng)讓這個(gè)想法變成了現(xiàn)實(shí)，至少在主流的瀏覽器上面。
售前咨詢專(zhuān)員
