WebAssembly开发环境的配置

WebAssembly（简称 WASM） 是一种新的编码方式，可以在现代的Web浏览器中运行，它是一种类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，从而突破JavaScript的性能瓶颈，为C/C++ 、Rust等语言提供编译目标，使其可以在可以在 Web 上运行。但WebAssembly不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，将 WebAssembly模块加载到Web页面中，也就是说，可以通过 WebAssembly来充分利用编译代码的性能，同时保持 JavaScript 的灵活性。因此，可以将复杂的计算任务交给 WebAssembly 处理，而 JavaScript 负责与页面元素的交互。例如，在开发3D展示应用时，WebAssembly 可以处理三维渲染等高计算任务，而 JavaScript 负责用户界面交互，从而在Web页面上获得接近桌面3D渲染的流畅体验。

高性能：WebAssembly 的二进制格式直接面向机器，效率更高。它能够显著提升复杂任务的处理速度，如图像处理、3D 渲染和压缩算法等。
与 JavaScript 协作：WebAssembly 并不是要取代 JavaScript，而是与之协作，共同提升网页性能。JavaScript 处理交互和逻辑部分，而 WebAssembly 处理计算密集型任务。

总之，WebAssembly的出现，为前端开发者提供了新的可能性。它不仅提升了网页应用的性能，还优化了用户体验。通过与 JavaScript 的协作，WebAssembly能够处理高计算任务，使得网页应用更加高效和流畅。

WebAssembly编译工具链：Emscripten

Emscripten是基于LLVM的编译器工具链，专注于将C/C++代码编译为WebAssembly或asm.js，是最早成熟的WASM编译方案之一，拥有丰富的特性和广泛的应用。

完整支持C/C++标准库，可直接编译大型项目
提供JavaScript绑定生成，简化Wasm与JS交互
多种优化级别，支持代码压缩和性能调优
集成SDL、OpenGL等多媒体库，适合游戏移植
适用场景：C/C++项目Web化、高性能计算、游戏引擎移植。例如，将传统C++游戏引擎编译为WASM，实现在浏览器中流畅运行。

WebAssembly工作流程

第一步：使用 C/C++ 、Rust 等语言编写源代码，这段代码应该可以解决某个问题，或者完成某段对浏览器中的 JavaScript 来说太过复杂的流程。

第二步：使用 Emscripten将你的源代码编译为 WebAssembly，这一步完成时，你将得到一个 wasm文件。

第三步：你将在网页上使用这个 wasm文件，将来你可以像其他ES6模块一样加载这个文件。

Emscripten环境的安装和配置

Emscripten官网地址：https://emscripten.org

这里我们选择在Windows平台下，通过MSYS2环境安装Emscripten，首选我们打开MSYS2 UCRT64终端，通过以下命令检查是否已安装Python3.8或以上版本。

# check Python version
python --version

如果Python未安装，可以使用以下命令安装。

# install Python
pacman -S python

Python安装之后，使用以下命令克隆emsdk源码，并安装最新版本。

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

安装结束后，我们采用手动配置环境变量方式。

手动配置环境变量

新建EMSDK、EMSDK_NODE、EMSDK_PYTHON三个环境变量，然后在PATH变量中加入emsdk目录、emsdk\upstream\emscripten目录和emsdk\node\22.16.0_64bit\bin目录。以下是笔者的安装环境，仅供参考。

EMSDK =D:/LibraryFiles/emsdk
EMSDK_NODE =D:/LibraryFiles/emsdk/node/22.16.0_64bit/bin/node.exe
EMSDK_PYTHON =D:/LibraryFiles/emsdk/python/3.13.3_64bit/python.exe
PATH +=D:/LibraryFiles/emsdk
PATH +=D:/LibraryFiles/emsdk/upstream/emscripten
PATH +=D:/LibraryFiles/emsdk/node/22.16.0_64bit/bin

验证配置环境

如上操作都完成的话可以使用以下方法验证是否安装成功

emcc.py -v
emcc.py --clear-cache

在emsdk里面创建个hello目录，创建hello.c

#include <stdio.h>
void main() {
printf("Hello, world!\n");
}

执行编译：

emcc.py hello.c -s WASM=1 -o hello.html

编译成功后，会生成hello.html、hello.js、hello.wasm三个文件。这里需要发布到服务器进行测试，我们使用emrun，运行一个简易的测试服务。

emrun.py --no_browser --port 8080 hello.html

然后，我们打开浏览器，访问http://localhost:8080/hello.html ，即可看到以下输出。