WebAssembly從入門到放棄（一&二）
原載于 個(gè)人網(wǎng)站 http://darktan.top/ 方便留言。在這邊發(fā)一份。前兩篇已合并
WebAssembly從入門到放棄（一）—— 概覽
寫在前面的話
MMP在摳了2個(gè)工作日外加1個(gè)休息日之后，這玩意終于走上了正軌。以至于我不用再在語(yǔ)言和環(huán)境的問(wèn)題上糾結(jié)。（然而并不完全是）、所以大概通篇下來(lái)會(huì)以一種 頭疼 + 罵街 + 真的牛逼 的方式寫下來(lái)。以及由于本人毅力有限。不清楚能不能寫完這個(gè)系列。盡量做到事無(wú)巨細(xì)以及最好能堅(jiān)持寫完。
要知道，現(xiàn)在已經(jīng)沒(méi)什么問(wèn)題可以讓我糾結(jié)三天才有個(gè)結(jié)論了。
計(jì)劃
基本會(huì)分為三塊說(shuō)吧
環(huán)境 （EMCC）
瀏覽器中的坑
想到哪算哪
進(jìn)入正題
WebAssamebly是個(gè)什么玩意？
簡(jiǎn)單點(diǎn)來(lái)說(shuō) 就是 c/c++ => 匯編 在瀏覽器中運(yùn)行。具體點(diǎn)就是 C/C++ 項(xiàng)目 => wasm => js => html 的過(guò)程。相信大部分人已經(jīng)知道了。
WebAssamebly有什么好處？
運(yùn)行效率什么的就不扯淡了。作為前端程序員理解最大的好處就是 甩鍋給C/C++程序員。
需要什么材料？
一個(gè)會(huì)寫點(diǎn)C或者C++ 并且可以流暢自如的修改C/C++開(kāi)源庫(kù)的前端開(kāi)發(fā)工程師。（個(gè)人認(rèn)為是最重要的一點(diǎn)）
Emscripten: 編譯環(huán)境
一個(gè)兼容WASM的瀏覽器
webworker (optional) 這真是看情況。后面會(huì)詳細(xì)說(shuō)
什么是 emscripten？
先放gayhub: https://github.com/kripken/emscripten
gayhub的解釋： An LLVM-to-JavaScript Compiler 也就是 LLVM到j(luò)s的編譯器。
具體結(jié)構(gòu)（由底層到上層） LLVM => Clang => emscripten
什么是 Clang？
Clang 是一個(gè)C、C++、Objective-C和Objective-C++編程語(yǔ)言的編譯器前端 （摘自維基百科）
說(shuō)明白點(diǎn)：就是給LLVM包裝了一層。讓它能夠編譯↑述代碼。
什么是 LLVM？
LLVM是一個(gè)自由軟件項(xiàng)目，它是一種編譯器基礎(chǔ)設(shè)施，以C++寫成。它是為了任意一種編程語(yǔ)言而寫成的程序，利用虛擬技術(shù)創(chuàng)造出編譯時(shí)期、鏈接時(shí)期、運(yùn)行時(shí)期以及“閑置時(shí)期”的最優(yōu)化。它最早以C/C++為實(shí)現(xiàn)對(duì)象，而目前它已支持包括ActionScript、Ada、D語(yǔ)言、Fortran、GLSL、Haskell、Java字節(jié)碼、Objective-C、Swift、Python、Ruby、Rust、Scala以及C#等語(yǔ)言。（摘自維基百科）
說(shuō)明白點(diǎn)：就是一個(gè)編譯各種語(yǔ)言的虛擬機(jī)，把各種亂七八糟的語(yǔ)言變異成匯編。
LLVM 工作原理？
編譯器1 / 編譯器2 / 編譯器3/ 編譯器4 => .o文件 => Linker（連接）=> 編譯、優(yōu)化 => Assembly
此處可以看出。即便裝了emscripten, 你的環(huán)境里必須裝了對(duì)應(yīng)編譯器及LLVM。
為毛我的電腦裝了編譯器emscripten仍然報(bào)錯(cuò)？
emscripten工作時(shí)，會(huì)先檢測(cè)環(huán)境是不是對(duì)的，其中需要找你的LLVM。如果找不到就直接拋錯(cuò)了。嗯。。（正常情況下可以找到）
先絮叨這么多，明天寫安裝過(guò)程
WebAssembly從入門到放棄（二）—— emscripten安裝
規(guī)矩
按照國(guó)際慣例，需要先貼官網(wǎng)地址、Git地址。
gayhub: https://github.com/kripken/emscripten
wiki: https://github.com/kripken/emscripten/wiki
官網(wǎng): http://emscripten.org
mac系統(tǒng)下安裝
講道理，沒(méi)啥好寫的
官方網(wǎng)站正上方Downloads選擇 Linux and MacOSX 下載并解壓
升級(jí)
./emsdk update下載安裝最新SDK工具
./emsdk install latest激活最新安裝工具
./emsdk activate latest添加環(huán)境變量
source ./emsdk_env.sh查看安裝的工具
./emsdk list
這里可以查看到最新的安裝工具列表。同理在上述安裝步驟中，發(fā)現(xiàn)我們用的都是latest也就是最新版本。協(xié)同開(kāi)發(fā)的過(guò)程中可能會(huì)涉及到版本統(tǒng)一的問(wèn)題?？梢允褂?br/>./emsdk install < list命令中查找到的工具及版本號(hào) >
./emsdk activate < list命令中查找到的工具及版本號(hào) >
對(duì)相應(yīng)的版本進(jìn)行安裝和激活。
Linux系統(tǒng)下安裝
一般情況
基本安裝是和上述安裝相同的。安裝過(guò)后也同樣是可以使用
emcc
emmake
進(jìn)行操作（下一次說(shuō)）缺少運(yùn)行庫(kù)
由于手賤用CentOS 6 試了一下。然后就開(kāi)始報(bào)各種缺少運(yùn)行庫(kù)的錯(cuò)誤。所以也在這里說(shuō)明一下
首先是一個(gè)比較簡(jiǎn)便的方法 安裝 sdk-incoming模塊 分為64 和 32位
然后。問(wèn)題就來(lái)了 會(huì)發(fā)現(xiàn)缺少cmake 自然 就是安裝cmake
如果安裝不成功 報(bào)錯(cuò)。并且報(bào)的是版本不夠?？赡苁荂11沒(méi)有安裝。安裝C++11
這里不做說(shuō)明 因?yàn)榫W(wǎng)上都能查到。各種博客。不喜歡搬運(yùn)。
另一種方法是 挨個(gè)安裝運(yùn)行庫(kù)
方法同理
python報(bào)錯(cuò)
最常見(jiàn)的的就是 AttributeError: ‘tuple’ object has no attribute ‘major’
原因：python 版本低，導(dǎo)致sys組件獲取到的 version_info 格式 和預(yù)期并不相同。以1.37.1為例。做以下python修改
emsdk-portable/emscripten/1.37.1/emcc 中
if sys.version_info.major == 2:前加入以下代碼
if type(sys.version_info) == 'tuple':
major = sys.version_info.major
else:
major = sys.version_info[0]
并把 sys.version_info.major == 2 改為 major == 2
注意 python編寫請(qǐng)使用游標(biāo)卡尺，不要直接復(fù)制代碼
如果輸入 emcc提示了 沒(méi)有input 那么就代表OK了。下面可以emcc 和 emmake工具進(jìn)行 C/C++ 到 wasm/js的編寫工作了。
PS：如果有啥問(wèn)題。這篇文章會(huì)在知乎和B站專欄發(fā)一下的。兩遍留言都OK。
Windows系統(tǒng)下安裝
下載exe文件。點(diǎn)擊下一步。(￣rǒ￣)
下期預(yù)告：emscripten 使用。有時(shí)間就寫 沒(méi)時(shí)間就放著
