在我们进入项目之前，让我们探索实际是什么Web组件。根据webassembly.org的说法，Web组件（WASM）是一种二进制指令格式和虚拟机，可让开发人员将几乎任何具有近乎本地性能的应用程序都带到网络上。在WASM之前，JavaScript是Web应用程序唯一可用的编程语言，但在2015年Google，Mozilla，Microsoft，Apple和其他科技公司announced announced一个新项目。在2017年，发布了第一个稳定版本的WASM，目的是在网络上启用高性能应用程序。但是，重要的说明是WASM并不是要替换JavaScript，而是并排工作。一个例子是一个HTML/CSS/JavaScript应用程序，其中包含一些模块，例如视频处理，动画，压缩等。使用WebAssembly开发了可增强性能的WebAssembly。与JavaScript相比，WASM如此有效的原因是，JavaScript应用需要从CPU中获得如此多的抽象，而WASM可以编译为字节码，然后由JavaScript读取并在较低级别的浏览器上运行。使用JavaScript和Wasm的应用程序的真实示例是Figma，这是一个流行的设计工作协作应用程序。
进入项目，让我们第一次从其git存储库中安装Emscripten。 Emscripten将将C汇编为WASM代码。我将使用Mac OS进行此项目。如果您想使用Windows沿着此链接，请使用此链接。首先，打开终端并使用：
克隆emscriptengit clone https://github.com/emscripten-core/emsdk.git
接下来，让CD进入EMSDK目录和Git Pull以获取最新版本。
cd emsdk
git pull
下载并安装最新的SDK工具运行：
./emsdk install latest
然后，我们需要为当前用户提供最新的SDK活动。进行此运行：
./emsdk activate latest
最后，让我们用以下方式激活路径和其他环境变量。
source ./emsdk_env.sh
现在是时候将CD到我们的项目目录并激活当前会话的环境了。注意：每次打开新终端时，您都必须执行此操作。进行此运行：
emsdk activate
验证一切正常运行：
emcc -v
编写本文时，当前版本为17.0.0。
现在是时候真正编写一些代码了！打开文本编辑器中的项目目录并创建一个hellowasm.c文件。如果您不知道如何编写C（像我一样），请复制以下代码并将其粘贴到您的文件中。
#include <stdio.h>
int main()
{
printf("Hello Web Assembly!\n");
return 0;
}
之后，让我们回到终端并运行：
emcc helloWasm.c
回顾您的文本编辑器，您应该看到两个新文件：a.out.js和a.out.wasm。 .WASM文件是您的二进制文件。您可以在文本编辑器中查看它，但是如果要查看它，则可以转到WASM2WAT并将文件拖放到浏览器中。 .js文件用于与.wasm文件进行通信。接下来，让我们创建一个HTML文件并将其命名为A.Out.html并输入样板HTML（或从下面复制）。确保它具有引用a.out.js.s.
的脚本标签
<!DOCTYPE html>
<html>
<head>
<title>Wasm demo</title>
</head>
<body>
<script src="a.out.js"></script>
</body>
</html>
现在是时候上线了！ JavaScript可以在本地访问我们的C文件，因此必须通过服务器完成。为此，我正在使用VS代码的Live Server扩展名。右键单击您的HTML文件，然后单击使用Live Server打开。您应该看到一个空白页。右键单击任何地方并打开浏览器控制台以查看您的消息打印。
关于WASM的很酷的事情不仅是在浏览器中运行。如果已安装了Node.js，则可以在计算机上运行它。为此，请返回您的终端并运行：
node a.out.js
感谢您的阅读，希望您发现Wasm有趣！有关更多信息，请查看：