瞭解 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.htmlmz.jsmz.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比較及其使用場景