WASM 就是 AWSM

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我们生活在这样一个时代：学习 JS 是为了编写服务器端代码和桌面应用程序（Electron），同时学习 C++ / Rust 是为了创建浏览器应用程序。

听起来很奇怪吗？嗯，这确实有点道理😦

随着 Node.js 等 JavaScript 运行时环境的出现，人们可以使用 JS 编写服务器端代码，而无需学习 PHP、C++、Java、JSP、Python 和 Ruby on Rails 等其他语言。因此，一个人只需掌握 JavaScript，就能轻松编写前端和后端代码。

尽管 JavaScript 无疑是最广为人知的编程语言，但并非人人都能精通它。假设你用 Unity 和 C++ 开发了一款游戏，并希望将其发布到 Web 端（例如浏览器），但为此你需要学习 JavaScript。这会限制许多才华横溢、渴望为 Web 开发做出贡献的人。而WebAssembly 正是在这种情况下应运而生。

WASM

WASM 或 WebAssembly 允许程序员使用除 JavaScript 之外的其他语言编写 Web 应用程序。您可以使用 C、C++、Rust、Python、Go 甚至 COBOL 等语言编写代码！顺便一提，WebAssembly 是一种类似汇编语言的底层语言。
正如上文提到的游戏开发者案例，WASM 格式无需浏览器插件即可支持在线游戏，并能够支持图形密集型游戏。

你可以用它来：

• 更好地执行目前已交叉编译到 Web 的语言和工具包（C/C++、GWT 等）。
• 图像/视频编辑
• 游戏：需要快速启动的休闲游戏、拥有大量资源的 AAA 游戏、游戏门户网站（混合方/原创内容）。
• 点对点应用（游戏、协作编辑、去中心化和中心化应用）以及更多内容，请点击此处查看。

正如 MDN 文档中所述：

WebAssembly 是一种新型代码，可在现代 Web
浏览器中运行。它是一种类似汇编语言的底层语言，采用紧凑的
二进制格式，运行性能接近原生应用，并
为C/C++、C# 和 Rust等语言提供编译目标，使
它们能够在 Web 上运行。此外，它还被设计为与
JavaScript 并行运行，从而实现两者的协同工作。

浏览器支持

目前，Firefox 和 Chrome 浏览器在 Linux、macOS、Windows 和 Android 系统上均支持 wasm 格式。最新版本的 Edge 和 Safari 也已包含对 WebAssembly 的支持。

低级汇编语言

简单来说，WASM 的底层工作原理如下：

• 像 C、C++ 和 Rust 这样的高级语言会被编译成二进制格式，即 .wasm 和文本格式 .wat。
• 使用编译器将用 C、C++ 和 Rust 编写的源代码编译成 .wasm 文件。

与JS兼容

请注意⚠⚠
WebAssembly并非JavaScript的替代品。它与JavaScript协同工作，取代asm.js（WASM之前的竞争对手）成为C/C++应用程序的编译目标。
延伸阅读：为什么WebAssembly比asm.js更快

我们来试一试！

以下是 WebAssembly 支持的语言列表：
https://github.com/appcypher/awesome-wasm-langs#contents

1. 无需任何设置：要了解整个 WebAssembly 概念的样子，您可以查看WebAssembly Studio：这是 Mozilla 开发的一款在线 IDE 工具，可用于将 C/C++ 和 Rust 代码编译为 WebAssembly (WASM)。
   

2. 设置要求：如果您是 C/C++ 爱好者，可以使用Emscripten：一个完整​​的 WebAssembly 编译器工具链。

• 使用 Emscripten SDK 可以将 C/C++ 代码编译成 .wasm 文件。之后，可以在 HTML 文件中借助 JavaScript 使用 .wasm 代码来显示输出结果。
  

• 如果你更喜欢 Rust，可以试试：rustc

将 C/C++ 编译为 WebAssembly

1. 如上所述，我们需要为 C/C++ 设置 Emscripten 环境。
2. 按照以下说明设置 Emscripten SDK 。
3. 我们使用 emscripten 生成在浏览器中运行 WebAssembly 代码所需的一切。

• 在新目录下创建一个 .c 文件并命名demo.c。将此代码复制粘贴到该程序文件中。
  

  #include<emscripten/emscripten.h>
  #include <stdio.h>
  
  int main() {
      printf("Hello World\n");
      return 0;
  }
  

• 现在，使用您之前进入 Emscripten 编译器环境的终端窗口，导航到与您的demo.c文件相同的目录，然后运行以下命令：
  

  emcc demo.c -s WASM=1 -o demo.html
  

我们通过命令传递的选项如下：

• -s WASM=1— 指定是否需要输出 wasm 文件。如果不指定，Emscripten 将默认输出asm.js文件。
• -o demo.html— 指定我们希望 Emscripten 生成一个 HTML 页面来运行我们的代码（以及要使用的文件名），以及 wasm 模块和 JavaScript “粘合”代码，以编译和实例化 wasm，以便在 Web 环境中使用。

此时，你的源代码目录中应该包含以下内容：

• 二进制 wasm 模块代码demo.wasm：WebAssembly 文件通常以 .websembly 结尾.wasm，其中包含编译期间生成的二进制指令和数据（内存）。
• 一个包含粘合代码的 JavaScript 文件，用于在原生 C 函数和 JavaScript/wasm 之间进行转换。demo.js
• 一个用于加载、编译和实例化你的 WebAssembly 代码，并在浏览器中显示其输出的 HTML 文件demo.html

如何运行这个程序？

在浏览器中打开搜索结果demo.html。请确保浏览器已更新，以避免任何兼容性问题。

输出

如果操作成功，您将在浏览器的 JavaScript 控制台中看到以下输出。以下是如何找到控制台的方法。

（屏幕上会显示“Hello World”）

恭喜！你做到了🎊

奖金

你也可以学习 WebAssembly 并直接编写本地代码。但这相当困难，因此人们不太喜欢这种方式。

想了解更多？请阅读MDN 上关于 WebAssembly 的权威文档。