WebAssembly从入门到放弃(一&二)

原载于 个人网站 http://darktan.top/ 方便留言。在这边发一份。前两篇已合并
WebAssembly从入门到放弃(一)—— 概览
写在前面的话
MMP在抠了2个工作日外加1个休息日之后,这玩意终于走上了正轨。以至于我不用再在语言和环境的问题上纠结。(然而并不完全是)、所以大概通篇下来会以一种 头疼 + 骂街 + 真的牛逼 的方式写下来。以及由于本人毅力有限。不清楚能不能写完这个系列。尽量做到事无巨细以及最好能坚持写完。
要知道,现在已经没什么问题可以让我纠结三天才有个结论了。
计划
基本会分为三块说吧
环境 (EMCC)
浏览器中的坑
想到哪算哪
进入正题
WebAssamebly是个什么玩意?
简单点来说 就是 c/c++ => 汇编 在浏览器中运行。具体点就是 C/C++ 项目 => wasm => js => html 的过程。相信大部分人已经知道了。
WebAssamebly有什么好处?
运行效率什么的就不扯淡了。作为前端程序员理解最大的好处就是 甩锅给C/C++程序员。
需要什么材料?
一个会写点C或者C++ 并且可以流畅自如的修改C/C++开源库的前端开发工程师。(个人认为是最重要的一点)
Emscripten: 编译环境
一个兼容WASM的浏览器
webworker (optional) 这真是看情况。后面会详细说
什么是 emscripten?
先放gayhub: https://github.com/kripken/emscripten
gayhub的解释: An LLVM-to-JavaScript Compiler 也就是 LLVM到js的编译器。
具体结构(由底层到上层) LLVM => Clang => emscripten
什么是 Clang?
Clang 是一个C、C++、Objective-C和Objective-C++编程语言的编译器前端 (摘自维基百科)
说明白点:就是给LLVM包装了一层。让它能够编译↑述代码。
什么是 LLVM?
LLVM是一个自由软件项目,它是一种编译器基础设施,以C++写成。它是为了任意一种编程语言而写成的程序,利用虚拟技术创造出编译时期、链接时期、运行时期以及“闲置时期”的最优化。它最早以C/C++为实现对象,而目前它已支持包括ActionScript、Ada、D语言、Fortran、GLSL、Haskell、Java字节码、Objective-C、Swift、Python、Ruby、Rust、Scala以及C#等语言。(摘自维基百科)
说明白点:就是一个编译各种语言的虚拟机,把各种乱七八糟的语言变异成汇编。
LLVM 工作原理?
编译器1 / 编译器2 / 编译器3/ 编译器4 => .o文件 => Linker(连接)=> 编译、优化 => Assembly
此处可以看出。即便装了emscripten, 你的环境里必须装了对应编译器及LLVM。
为毛我的电脑装了编译器emscripten仍然报错?
emscripten工作时,会先检测环境是不是对的,其中需要找你的LLVM。如果找不到就直接抛错了。嗯。。(正常情况下可以找到)
先絮叨这么多,明天写安装过程
WebAssembly从入门到放弃(二)—— emscripten安装
规矩
按照国际惯例,需要先贴官网地址、Git地址。
gayhub: https://github.com/kripken/emscripten
wiki: https://github.com/kripken/emscripten/wiki
官网: http://emscripten.org
mac系统下安装
讲道理,没啥好写的
官方网站正上方Downloads选择 Linux and MacOSX 下载并解压
升级
./emsdk update下载安装最新SDK工具
./emsdk install latest激活最新安装工具
./emsdk activate latest添加环境变量
source ./emsdk_env.sh查看安装的工具
./emsdk list
这里可以查看到最新的安装工具列表。同理在上述安装步骤中,发现我们用的都是latest也就是最新版本。协同开发的过程中可能会涉及到版本统一的问题。可以使用
./emsdk install < list命令中查找到的工具及版本号 >
./emsdk activate < list命令中查找到的工具及版本号 >
对相应的版本进行安装和激活。
Linux系统下安装
一般情况
基本安装是和上述安装相同的。安装过后也同样是可以使用
emcc
emmake
进行操作(下一次说)缺少运行库
由于手贱用CentOS 6 试了一下。然后就开始报各种缺少运行库的错误。所以也在这里说明一下
首先是一个比较简便的方法 安装 sdk-incoming模块 分为64 和 32位
然后。问题就来了 会发现缺少cmake 自然 就是安装cmake
如果安装不成功 报错。并且报的是版本不够。可能是C11没有安装。安装C++11
这里不做说明 因为网上都能查到。各种博客。不喜欢搬运。
另一种方法是 挨个安装运行库
方法同理
python报错
最常见的的就是 AttributeError: ‘tuple’ object has no attribute ‘major’
原因:python 版本低,导致sys组件获取到的 version_info 格式 和预期并不相同。以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编写请使用游标卡尺,不要直接复制代码
如果输入 emcc提示了 没有input 那么就代表OK了。下面可以emcc 和 emmake工具进行 C/C++ 到 wasm/js的编写工作了。
PS:如果有啥问题。这篇文章会在知乎和B站专栏发一下的。两遍留言都OK。
Windows系统下安装
下载exe文件。点击下一步。( ̄rǒ ̄)
下期预告:emscripten 使用。有时间就写 没时间就放着