欢迎光临散文网 会员登陆 & 注册

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

2018-03-07 15:49 作者:暗切线  | 我要投稿

原载于 个人网站 http://darktan.top/ 方便留言。在这边发一份。前两篇已合并



WebAssembly从入门到放弃(一)—— 概览

写在前面的话

MMP在抠了2个工作日外加1个休息日之后,这玩意终于走上了正轨。以至于我不用再在语言和环境的问题上纠结。(然而并不完全是)、所以大概通篇下来会以一种 头疼 + 骂街 + 真的牛逼 的方式写下来。以及由于本人毅力有限。不清楚能不能写完这个系列。尽量做到事无巨细以及最好能坚持写完。

要知道,现在已经没什么问题可以让我纠结三天才有个结论了。

计划

基本会分为三块说吧

  • 环境 (EMCC)

  • 浏览器中的坑

  • 想到哪算哪

进入正题

  • WebAssamebly是个什么玩意?

简单点来说 就是 c/c++ => 汇编 在浏览器中运行。具体点就是 C/C++ 项目 => wasm => js => html 的过程。相信大部分人已经知道了。

  • WebAssamebly有什么好处?

运行效率什么的就不扯淡了。作为前端程序员理解最大的好处就是 甩锅给C/C++程序员

  • 需要什么材料?

  1. 一个会写点C或者C++ 并且可以流畅自如的修改C/C++开源库的前端开发工程师。(个人认为是最重要的一点)

  2. Emscripten: 编译环境

  3. 一个兼容WASM的浏览器

  4. 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 使用。有时间就写 没时间就放着


WebAssembly从入门到放弃(一&二)的评论 (共 条)

分享到微博请遵守国家法律