WebAssembly小技巧01-学习如何学习WebAssembly

csharp 复制代码

by 雪隐 from https://juejin.cn/user/1433418895994094
文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可联系授权

原文链接

如果您对WebAssembly感兴趣并且想要学习更多，看一下这本Packt写的书Learn WebAssembly

不开玩笑的说，我用了2年的时间在我的一个GitHub仓库上只得到了一个Star。它是一个Npm包在上个月有超过900次下载。我创建了另一个仓库是用WebAssembly重做的npm包，并且在14个小时内得到了4个star.如果您们喜欢我，您们可能对这项新的技术感兴趣，但是不知道该从何开始。

与其写一篇文章关于WebAssembly能做什么或者类似的（它是什么），我会尝试提供一个可行的方案，以便您能够开始运用它。

在我深入主题之前，我应该先简单介绍一下我的背景。我是一个JavaScript开发者写过很多VBA的代码，所以，这些基础技术对我来说是全新的，就像他们可能对您来说一样新。

让我们开始吧！

第一步：理解这个技术

在开始写任何代码之前，让您自己了解一些更高层次的概念这也许是一个好的点子。这有一些系列文章是由Lin Clark写的名叫A cartoon intro to WebAssembly。坦白说，如果你只读那些，你的情况会相当不错。

如果您想要更加的深入，您会发现解释说明博客的内容和文章到处都是。问题是这些内容可能经过了多年的发展已经变的有些过期了。我非常推荐去看官方主页，WebAssembly.org并进行探索。Getting Started部分很有帮助，而且规范可以下载，尽管它有157页，可能会让人有点吃力。

如果您厌倦了阅读，想要直接进入实质内容，那您需要安装工具链。我们开始吧！

第二步：安装工具链

在进入安装的步骤之前，我想要指出一个替代方案：如果您只是想要玩一玩WebAssembly不在您的电脑上安装一系列东西，您可以是使用WasmFiddle。它有一个问题是每次您更改您的代码，您必须下载一个新的.wasm文件并拖动到目录中。

如果您想要安装全部，很好！这里有一些东西您必须安装才能开始创建WebAssembly模块。这里有更多详细的内容您可能需要，下面是简单的总结：

Git
CMake
Host system compiler (GCC, Xcode, or Visual Studio 2015)
Python 2.7.x
Emscripten SDK (emsdk)

对于Emscripten SDK ,我用的是Mac，所以我下载了Emscripten SDK for Linux and OS X。我解压到目录~/Tooling/emsdk(（我去掉了-portable)。它的安装是非常简单的，只要按照这个installation section指南就行了。

我不想深入到什么是Emscripten的具体细节或者它是怎么关联到WebAssembly。我只想说LLVM-to-JavaScript编译器器也能生成WebAssembly模块。

注意：当我运行 source ./emsdk_env.sh 命令时，我将生成的环境变量添加到了我的 exports.zsh 文件中（如果你使用bash，你应该将它们添加到你的 .bash_profile 中），这样我就可以在没有 ./ 的情况下运行编译命令（使用 emcc 而不是 ./emcc）。下面的要点展示了什么被导出。

bash 复制代码

# You can also add these to your .bash_profile file, just make sure
# you update the versions of anything that doesn't match (i.e. emscripten
# is version 1.37.14, but it may be different for you).

export EM_CONFIG="$HOME/.emscripten"
export EMSDK="$HOME/Tooling/emsdk"
export EM_CONFIG="$HOME/.emscripten"
export EMSCRIPTEN="$HOME/Tooling/emsdk/emscripten/1.37.14"
export BINARYEN_ROOT="$HOME/Tooling/emsdk/clang/e1.37.14_64bit/binaryen"
export PATH="$PATH:$HOME/Tooling/emsdk:$HOME/Tooling/emsdk/emscripten/1.37.14:$HOME/Tooling/emsdk/node/4.1.1_64bit/bin:$HOME/Tooling/emsdk/clang/e1.37.14_64bit"

第三步：获得开发工具

这会有很多种选择，您需要一个编译器或者IDE并支持C或者C++。这是个好机会使用你已经在用的编辑器。我个人使用的是CLion因为是我JetBrains的粉丝,但是您能够使用Visual Studio Code，Visual Studio(Windows),Xcode(Mac),或者许多其他的选项。

注意：如果决定使用CLion，您必须创建有一些基础信息的CMakeList.txt文件它放在您项目的根目录下。它主要为了提供CMake的配置功能.

bash 复制代码

# This is the version that came packaged with my version of CLion:
cmake_minimum_required(VERSION 3.7)

# I'm giving the project an arbitrary name for demonstration purposes,
# you can name it whatever you want:
project(example)

# Create a src directory at the root level of your project and add a
# file with whatever name you want (I used the project name for
# simplicity):
add_executable(example src/example.c)

第四步：学习C或者C++或者Rust

这或许是最耗时的部分，您需要去学C，C++或者Rust。如果你有Pluralsight的会员资格，那里有一个非常棒的C++学习路径，但你需要投入大约47个小时。Pluralsight还有几门C语言的课程（我没有看过它们，但我相信它们很扎实）。鉴于它们的成熟度，在网络上有大量的免费资源来学习其中任何一种。以下是我找到的一些很好的起点资源。

《Learn C》和《Learn C the Hard Way》非常有趣，因为它们都有交互式教程，所以你可以直接在浏览器中运行代码。如果你决定学习C++，Kate Gregory在教这门语言时做得非常出色。她是上文提到的C++学习路径中的Pluralsight课程的几位作者之一。Rust也是一个与WebAssembly非常匹配的好选择。它是一个相对较新的语言，所以在线上可用的培训材料不像C或C++那么丰富。Pluralsight上有一个《Rust基础》课程，而Udemy以非常合理的价格提供了一个Rust培训课程。我还在hackr.io上找到了这份列表，其中包含了来自各种来源的培训材料。

第五步：学习WebAssembly

这或许对我来说是最复杂的一步。有许多的博客文章和标题让你学习，但是他们对基础技术的描述并不深（或者太深）。我强烈推荐在egghead.io上的Guy Bedford的Getting Started Using WebAssembly课程。如果您是认真想学WebAssembly,40美元的会员付出是值得的。

GitHub上的Awesome wasm仓库.是一个资源丰富的一站式商店。那里有非常全面的文章、工具、操作指南等列表。

如果你是一个熟悉Node.js的JavaScript开发者，作者在GitHub上整合了一个简单的样板项目，演示了如何将.wasm文件与JavaScript集成。如果你想试试的话，你需要安装Node.js 8。

结束

开始学习WebAssembly绝非易事。我研究并尝试了它近两个月，感觉我只是触及了它的表面。预测未来（尤其是网络的未来）是不可能的，但我相信学习WebAssembly会是有益投资。

你也可以这样看待它：即使WebAssembly被废弃，你仍然可以作为C++程序员（或者Rust程序员）找到工作😀。