Windows10中Emscripten 安裝詳解
Emscripten編譯器，是WebAssembly開發的重要工具之一，主要是通過emcc（Emscripten Compiler Frontend）來工作的。這是個命令行工具。
目前（2020年6月）Windows10中Emscripten 安裝比較容易出錯，網上文章大多語焉不詳，特撰此文，供新手減少挫折感。
【WebAssembly？
1，WebAssembly是由 Google、Microsoft、Mozilla、Apple 等幾家大公司合作發起的一個關於 面向Web的通用二進制和文本格式 的項目。WebAssembly 是除了 JavaScript 以外，另一種可以在網頁中運行的編程語言。
2，WebAssembly（縮寫WASM）是一種新的字節碼格式。並且被設計爲多種編程語言（如C、Rust）目標文件格式，以.wasm 爲文件名後綴。WASM通過LLVM（Low Level Virtual Machine、底層虛擬機）工具鏈支持多種編程語言。
3，WebAssembly初期目標是瀏覽器內應用程序的高性能執行引擎，隨着WASM 在開發者社區中越來越流行，WASM 也正在從客戶端遷移到服務端，成爲服務端技術的新銳。
WebAssembly 可以用 C 語言或者 Rust 開發，再編譯成 .was文件（WebAssembly文件），還可以利用TypeScript開發，再編譯成 .was文件。
簡單地說，WebAssembly 是一種可以使用非 JavaScript 編程語言編寫代碼並且能在瀏覽器上運行的技術方案。】
一）前提準備
目前的情況（2020年6月），首先要保證你的計算機安裝已安裝Python 2.7.12或更新版（如2.7.18）和Git。
emsdk是一組基於Python 2的腳本，因此首先需要安裝Python 2.7.12或更新版（注意2.X系列，而不是3.X系列）。
Python下載地址：https://www.python.org/downloads/
我用的是python-2.7.18.amd64
安裝過程一路按默認設置進行即可，最後重啓一次電腦。默認安裝路徑C:\Python27。
【特別提示：如果你安裝了多個版本Python，請在環境變量中將版本的安裝路徑放在最前面，參見下圖：
】
驗證版本：
打開cmd，在提示符>後輸入
python –version 回車（即按下Enter鍵）
參見下圖：
如此，則OK。
Git
Git是當今最流行的版本控制軟件，它包含了許多高級工具。它採用了分佈式版本庫的作法，不需要服務器端軟件，就可以運作版本控制，使得源代碼的發佈和交流極其方便。後面用到它。
下載地址：https://git-scm.com/downloads
安裝過程一路按默認設置進行即可。默認安裝路徑C:\Program Files\Git。
驗證版本
Git --version
二）安裝Emscripten 編譯器(emcc)
1、建立安裝目錄如D:\WebAssemblyTest（根據你的意願建立）
在cmd中
mkdir d:\WebAssemblyTest
2、克隆emsdk倉庫到目錄d:\WebAssemblyTest
在cmd中，切換到目錄d:\WebAssemblyTest
cd /d d:\WebAssemblyTest
在cmd中輸入 git clone https://github.com/juj/emsdk.git ，克隆emsdk倉庫，參見下圖：
其中，Cloning into 'emsdk'.. 意思是：克隆到“emsdk”。。。
3、切換到emsdk文件夾 更新emsdk，確保是最新版
cd emsdk
emsdk.bat update
這裏使用的是git，所以運行時會提示使用"git pull"
用一下git pull
4、安裝，注意這一步比較容易出問題，請保持耐心。對這一步，建議新手先看完整，再進行實踐。
在cmd中運行emsdk.bat install latest
經驗證，這一步一般進行不下去，自動下載安裝期間幾乎百分百出錯：
Error: Downloading URL '…node-v12.9.1-win-x64.zip…': <urlopen error [Errno 10060] >
Installation failed!
解決辦法:
根據提示，將上網搜索下載需要的.zip文件，放入emsdk目錄中的zips目錄
再次運行emsdk.bat install latest
我在測試時發現，在git bush中運行emsdk.py install latest，比在cmd中運行emsdk.bat install latest，建議使用git bush，下面演示就是用它。
使用git bush打開git控制檯窗口，參見下圖：
其中$是git bush的提示符，在提示符後輸入
d:/WebAssemblyTest/emsdk/emsdk.py install latest 回車（即按下Enter鍵）
注意，其中emsdk.py必須帶後綴.py 前面的路徑根據你的實際情況而定。
如果你已切換到d:/WebAssemblyTest/emsdk路徑，命令前的路徑就不需要了，可在$提示符後輸入emsdk.py install latest 回車（即按下Enter鍵）
【提示：在git bush中和在cmd中，切換到其他盤符的cd命令，不同之處：
cmd中需要/d，如cd /d d:/WebAssemblyTest/emsdk
git bush中不需要/d，如cd d:/WebAssemblyTest/emsdk 】
在安裝過程中如果下載報錯提示如：
Installing tool 'java-8.152-64bit'..
Error: Downloading URL 'https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip': <urlopen error [Errno 10060] >
Installation failed!
注意其中的portable_jre_8_update_152_64bit.zip，你可到網上下載之
看emsdk目錄中是否有zips目錄若無可手動建立，將上網搜索下載的portable_jre_8_update_152_64bit.zip放入zips目錄中（不用解壓）。
關閉git bush，重新打開，在$提示符後再次輸入
d:/WebAssemblyTest/emsdk/emsdk.py install latest
請耐心等待
已安裝好的會自動跳過，參見下圖：
請耐心等待一段時間。每次下載報錯一次就用重複一次，直至成功完成，參見下圖：
5、激活sdk包
在git bush中（也可以在cmd中），輸入
d:/WebAssemblyTest/emsdk/emsdk.py activate latest
提示：前面的路徑根據你的實際情況而定。
請耐心等待完成，參見下圖：
6、設置環境變量
在cmd中，如下輸入，：
d:/WebAssemblyTest/emsdk/emsdk_env.bat
提示：前面的路徑根據你的實際情況而定。
參見下圖：
提示、你可以手動配置環境變量，在系統變量path中加上（上圖PATH +=後面的部分），否則每次打開cmd窗口使用emcc都要運行一次d:/WebAssemblyTest/emsdk/emsdk_env.bat
7、驗證
emcc -v不報錯就成功了，參見下圖：
獲取幫助
emcc --help
例子
建立一個名爲文件hello_world.c ，內容如下：
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
保存到D:\WebAssemblyTest中
編譯命令簡要格式：
其中emcc就是Emscripten編譯器行命令，c_file 如test.c是我們的輸入文件，使用-o選項可以指定輸出文件，out_file 如test.wasm、test.js、test.html，是我們的輸出文件。
關於out_file 注意兩點：1）out_file可以帶路徑。2）若爲-o test.wasm，則只生成test.wasm這個文件；若爲-o test.js，則生成test.js文件 ，還有test.wasm；若爲-o test.html，則生成test.html文件，還有test.js和test.wasm。
編譯上面的例子
在cmd中輸入emcc D:\WebAssemblyTest\hello_world.c -s WASM=1 -o D:\WebAssemblyTest\hello_world.html
參見下圖：
編譯結果是這樣的：
注意、hello_world.html不能用瀏覽器直接打開，否則報錯，需要先啓動http服務。
啓動http服務命令
在cmd中輸入emrun --no_browser --port 8080 D:\WebAssemblyTest\hello_world.html
注意後面要加參數爲具體的hello_world.html文件路徑，參見下圖：
然後啓動edge瀏覽器，在地址欄輸入
http://localhost:8080/test.html
訪問結果是這樣的：
再看看瀏覽器控制檯的輸出：
再舉一例
①建立一個名爲文件test.c ，內容如下：
char* toChar (char* str) {
return str;
}
int add (int x, int y) {
return x + y;
}
int square (int x) {
return x * x;
}
保存到D:\WebAssemblyTest中
②設置環境變量
cmd窗口運行d:/WebAssemblyTest/emsdk/emsdk_env.bat
提示：前面的路徑根據你的實際情況而定。
③編譯上面的例子
在cmd中輸入
emcc D:\WebAssemblyTest\test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o D:\WebAssemblyTest\test.wasm
注意、本例和前例不同，使用了優化選項，並僅輸出.wasm文件（這裏是test.wasm）。
④新建test.html加入調用上面產生的test.wasm：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/**
* @param {String} path wasm 文件路徑
* @param {Object} imports 傳遞到 wasm 代碼中的變量
*/
function loadWebAssembly (path, imports = {}) {
return fetch(path) // 加載文件
.then(response => response.arrayBuffer()) // 轉成 ArrayBuffer
.then(buffer => WebAssembly.compile(buffer))
.then(module => {
imports.env = imports.env || {}
// 開闢內存空間
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
// 創建變量映射表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
// 在 MVP 版本中 element 只能是 "anyfunc"
imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
}
// 創建 WebAssembly 實例
return new WebAssembly.Instance(module, imports)
})
}
// 加載wasm文件
loadWebAssembly('test.wasm')
.then(instance => {
//調用c裏面的方法
const toChar = instance.exports.toChar
const add = instance.exports.add
const square = instance.exports.square
console.log('return: ', toChar("12352324"))
console.log('10 + 20 =', add(10, 20))
console.log('3*3 =', square(3))
console.log('(2 + 5)*2 =', square(add(2 + 5)))
})
</script>
</body>
</html>
注意，將test.html放在test.wasm所在目錄中。不要用瀏覽器直接打開test.html，要按下面的介紹進行。
⑤啓動http服務
emrun --no_browser --port 8080 D:\WebAssemblyTest\test.html
參見下圖：
⑥然後啓動edge瀏覽器，在地址欄輸入
http://localhost:8080/test.html
訪問結果是這樣的：
學習資源
WebAssembly編程
https://www.cntofu.com/book/150/index.html