[工欲善其事|必先利其器]Emscripten1.39.4工具鏈的安裝與簡單使用/*WebAssembly從入門到放棄*/
- 2020 年 2 月 25 日
- 筆記
WebAssembly是什麼？
WebAssembly是一種運行在現代網絡瀏覽器中的新型代碼，並且提供新的性能特性和效果。它設計的目的不是為了手寫代碼而是為諸如C、C++和Rust等低級源語言提供一個高效的編譯目標。對於網絡平台而言，這具有巨大的意義——這為客戶端app提供了一種在網絡平台以接近本地速度的方式運行多種語言編寫的代碼的方式；在這之前，客戶端app是不可能做到的。而且，你在不知道如何編寫WebAssembly代碼的情況下就可以使用它。JavaScript框架不但可以使用WebAssembly獲得巨大性能優勢和新特性，而且還能使得各種功能保持對網絡開發者的易用性。 https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts
工具鏈配置Step by Step:(https://emscripten.org/docs/getting_started/downloads.html)，可惜的是，如果按照改鏈接就能配置好開發環境，那麼就不用費這麼多文字了：
1.安裝git工具後，確保git的bin文件夾在環境變量path下，執行命令行：
# Get the emsdk repo git clone https://github.com/emscripten-core/emsdk.git # Enter that directory cd emsdk
2.安裝openSSL，添加其bin目錄到環境變量path中，然後在當前目錄中執行如下命令:
# 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 install latest運行會報錯解決方案就是安裝openSSL，並添加其bin目錄到環境變量path中。
安裝過程命令行如下：
Microsoft Windows [版本 10.0.18363.592] (c) 2019 Microsoft Corporation。保留所有權利。 C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emsdk update You seem to have bootstrapped Emscripten SDK by cloning from GitHub. In this case, use "git pull" instead of "emsdk update" to update emsdk. (Not doing that automatically in case you have local changes) Alternatively, use "emsdk update-tags" to refresh the latest list of tags from the different Git repositories. C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>git pull There is no tracking information for the current branch. Please specify which branch you want to merge with. See git-pull(1) for details. git pull <remote> <branch> If you wish to set tracking information for this branch you can do so with: git branch --set-upstream-to=origin/<branch> master C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emsdk install --global latest Installing SDK 'sdk-releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit'.. Installing tool 'node-12.9.1-64bit'.. Error: Downloading URL 'https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v12.9.1-win-x64.zip': <urlopen error unknown url type: https> Warning: Possibly SSL/TLS issue. Update or install Python SSL root certificates (2048-bit or greater) supplied in Python folder or https://pypi.org/project/certifi/ and try again. Installation failed! C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emsdk install --global latest Installing SDK 'sdk-releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit'.. Installing tool 'node-12.9.1-64bit'.. Downloading: C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/node-v12.9.1-win-x64.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v12.9.1-win-x64.zip, 35200117 Bytes Unpacking 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/node-v12.9.1-win-x64.zip' to 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/node/12.9.1_64bit' Done installing tool 'node-12.9.1-64bit'. Installing tool 'python-2.7.13.1-64bit'.. Downloading: C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/WinPython-64bit-2.7.13.1Zero.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/WinPython-64bit-2.7.13.1Zero.zip, 41285159 Bytes Unpacking 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/WinPython-64bit-2.7.13.1Zero.zip' to 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/python/2.7.13.1_64bit' Done installing tool 'python-2.7.13.1-64bit'. Installing tool 'java-8.152-64bit'.. Downloading: C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/portable_jre_8_update_152_64bit.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip, 69241499 Bytes Unpacking 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/portable_jre_8_update_152_64bit.zip' to 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/java/8.152_64bit' Done installing tool 'java-8.152-64bit'. Installing tool 'releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit'.. Downloading: C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/967836071d96d9b7894e492382f5fcb96423fc07-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/967836071d96d9b7894e492382f5fcb96423fc07/wasm-binaries.zip, 528244786 Bytes Unpacking 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/zips/967836071d96d9b7894e492382f5fcb96423fc07-wasm-binaries.zip' to 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/upstream' Done installing tool 'releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit'. up to date in 0.27s Done installing SDK 'sdk-releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit'. C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emsdk activate latest Writing .emscripten configuration file to user home directory C:UsersassTeam/ The Emscripten configuration file C:UsersassTeam.emscripten has been rewritten with the following contents: NODE_JS = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/node/12.9.1_64bit/bin/node.exe' PYTHON = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/python/2.7.13.1_64bit/python-2.7.13.amd64/python.exe' JAVA = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/java/8.152_64bit/bin/java.exe' LLVM_ROOT = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/upstream/bin' BINARYEN_ROOT = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/upstream' EMSCRIPTEN_ROOT = 'C:Usersasscache/projects/code/HTML/webAssembly/emsdk/upstream/emscripten' TEMP_DIR = 'c:/users/songx/appdata/local/temp' COMPILER_ENGINE = NODE_JS JS_ENGINES = [NODE_JS] Adding directories to PATH: PATH += C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk PATH += C:UsersasscacheprojectscodeHTMLwebAssemblyemsdknode12.9.1_64bitbin PATH += C:UsersasscacheprojectscodeHTMLwebAssemblyemsdkpython2.7.13.1_64bitpython-2.7.13.amd64 PATH += C:UsersasscacheprojectscodeHTMLwebAssemblyemsdkjava8.152_64bitbin PATH += C:UsersasscacheprojectscodeHTMLwebAssemblyemsdkupstreamemscripten Setting environment variables: EMSDK = C:Usersasscache/projects/code/HTML/webAssembly/emsdk EM_CONFIG = C:UsersassTeam.emscripten EMSDK_NODE = C:UsersasscacheprojectscodeHTMLwebAssemblyemsdknode12.9.1_64bitbinnode.exe EMSDK_PYTHON = C:UsersasscacheprojectscodeHTMLwebAssemblyemsdkpython2.7.13.1_64bitpython-2.7.13.amd64python.exe JAVA_HOME = C:UsersasscacheprojectscodeHTMLwebAssemblyemsdkjava8.152_64bit Set the following tools as active: node-12.9.1-64bit python-2.7.13.1-64bit java-8.152-64bit releases-upstream-967836071d96d9b7894e492382f5fcb96423fc07-64bit The changes made to environment variables only apply to the currently running shell instance. Use the 'emsdk_env.bat' to re-enter this environment later, or if you'd like to permanently register this environment globally to all users in Windows Registry, rerun this command with the option --global. C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emcc -v emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.39.6 clang version 10.0.0 (Cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 06cfcdcca7de9c88a1e885eff0d0c4c07090ad48) Target: x86_64-pc-windows-msvc Thread model: posix InstalledDir: C:Usersasscache/projects/code/HTML/webAssembly/emsdk/upstream/bin shared:INFO: (Emscripten: Running sanity checks)
編譯實例代碼（demo.c）：
#include <stdio.h> int main(int argc, char ** argv) { printf("WebAssembly module loaded successfully!n"); } // 返回2020 int test() { return 2020; }
編譯命令行（技術不到家，只能把源程序放在emsdk根目錄下測試）：
emcc demo.c -s WASM=1 -O3 -o demo.js
編譯過程如下：
C:UsersasscacheprojectscodeHTMLwebAssemblyemsdk>emcc demo.c -s WASM=1 -O3 -o demo.js cache:INFO: generating system library: libcompiler_rt.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibcompiler_rt.a" for subsequent builds) cache:INFO: - ok cache:INFO: generating system library: libc-wasm.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibc-wasm.a" for subsequent builds) cache:INFO: - ok cache:INFO: generating system library: libdlmalloc.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibdlmalloc.a" for subsequent builds) cache:INFO: - ok cache:INFO: generating system library: libpthread_stub.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibpthread_stub.a" for subsequent builds) cache:INFO: - ok cache:INFO: generating system library: libc_rt_wasm.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibc_rt_wasm.a" for subsequent builds) cache:INFO: - ok cache:INFO: generating system library: libsockets.a... (this will be cached in "C:UsersassTeam.emscripten_cachewasm-objlibsockets.a" for subsequent builds) cache:INFO: - ok
在同目錄生成了demo.js和demo.wasm兩個文件，wasm文件就是被編譯成可供js調用的位元組碼文件。先到這裡，以後有空再說如何在程序中加載wasm文件並執行其中的函數。
參考資料：
[1]https://segmentfault.com/a/1190000014208777
[2]https://emscripten.org/docs/getting_started/downloads.html
[3]https://github.com/emscripten-core/emsdk
