window制作WebAssembly（Wasm）模块，编译C/C++/Rust等语言，为javascript使用的方法，及相关的工具如Cmake,git,wabt的正确安装和配置

最新推荐文章于 2024-10-31 10:58:48 发布

cdcdhj

最新推荐文章于 2024-10-31 10:58:48 发布

阅读量1.3k

点赞数 23

分类专栏： webAssembly 文章标签： wasm c语言 c++

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/143353529

版权

webAssembly 专栏收录该内容

3 篇文章

订阅专栏

相信很多人看到webAssembly模块的官方页面的介绍时都一头雾水，安装的软件之多，之繁杂，相互格式的转换也是搞不清楚；
下面就来一一介绍使用webAssembly模块之前需要安装那些软件，这里说的都是在window10环境当中
1、安装python
需要安装Python 3.6或更新版,千万不要安装Python2.7版本，因为ssl原因安装2.7以下版本，在安装Emscripten时遇到错误，很多google的东西不能下载
Python下载地址：https://www.python.org/downloads/
安装过后要进行环境设置，是点系统变量设置里面的Path,将你安装好的python3设置进去，如果你是双环境或在cmd中输入python弹出window的商城时，将window商城关闭，双环境时将python3移到最上面。
验证Python版本：打开cmd，在提示符后输入python --version回车，直到出现版本号才算正常；
2、安装git
Git是当今最流行的版本控制软件，下载地址：https://git-scm.com/downloads
安装过程按默认设置进行，默认安装路径为C:\Program Files\Git;如果你安装在D盘或其它盘请设置安装路径，如D盘：D:\git\Git\cmd，一定要是cmd目录
验证Git版本：在cmd中输入git --version。
3、克隆emsdk仓库：
在cmd中，首先建立一个安装目录，例如D:\WebAssemblyTest。
然后使用以下命令克隆emsdk仓库到该目录：

git clone https://github.com/emscripten-core/emsdk.git

切换到emsdk目录

cd emsdk

更新emsdk版本：

emsdk update
git pull

安装最新的emsdk，并配置全局的环境变量：

emsdk install --global latest

激活emsdk：

emsdk activate latest

应用环境变量（每次打开新的cmd都需要执行或者在安装完成将emsdk的路径配置到环境变量中）：

emsdk_env.bat

如果你要永久设置此环境变量
这将为当前会话设置环境变量。如果你想要永久设置环境变量，可以使用–permanent选项：

emsdk.bat activate --permanent latest

这一句会自动设置环境变更，避免你去手动设置的麻烦

验证安装是否成功，终端输入emcc -v，如果出现版本信息，则表示安装成功；如果当中出现错误，那大部分为Python的版本不对，不能兼容引起的

目前到这里你就可以编译C/C++代码为webAssembly文件了

创建你的C/C++源文件。例如，一个简单的“Hello, World!”程序可以是这样的：

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

编译代码为Wasm：
使用Emscripten的emcc命令来编译你的C/C++代码。例如：

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

这里的-s WASM=1选项告诉Emscripten你想要输出WebAssembly格式。-o hello.html选项会生成一个HTML文件，这个文件可以用来在浏览器中运行你的Wasm模块。

生成的文件：
编译后，你会得到几个文件：

hello.wasm：这是编译后的WebAssembly二进制模块。
hello.js：这是“胶水”代码，它包含了在原生C函数和JavaScript/Wasm之间转换所需的代码。
hello.html：这是一个HTML文件，它加载并运行你的Wasm模块。
运行你的Wasm模块：
使用支持WebAssembly的浏览器打开hello.html文件，你将看到编译后的C/C++程序的输出。

注意：到了这里也是系统自动生成的wasm代码，你并不能编辑wasm代码或将wasm转换成wat，或将wat转换成wasm，离你想要编辑wat成wasm还差一步

如果你想用记事本或是VS工具或其它编程工具，写一段wat代码，然后保存为后缀为wat的文件，再用emcc将它转换成wasm，如：emcc hello.wat -o hello.wasm，对不起你想多了，会给你显示格式不正确

下面就介绍将wasm转换成wat，或将wat代码转换成wasm需要的工具和安装方法，下面的安装你最好用梯子，不然安装wabt时会出错

1、安装CMake
可以从CMake官网下载并安装。
记得要设置环境变量，在系统设置里面，如在D盘：D:\cmake\bin

2、安装MinGW
很多介绍都是在MinGW官网里面下面安装，但现在的官网改版非常快，那些指定的页面里根本找不到要下载的版本
特别是window需要的版本已经移至这个网站：https://winlibs.com/
只需要进这个网站下载64位的with POSIX threads的 7-Zip archive即可；
比如在D盘新建一个MinGW文件夹，将下载的7-Zip archive放在其中，然后解压即可，然后就是设置变量，
将环境变量设置到bin目录：如：D:\MinGW\mingw64\bin
windows+r打开命令行管理器并且输入cmd:
然后输入gcc -v 或者g++ -v 或者 gcc --version 或者 g++ --version:
出现版本号即说明安装成功

3、安装WABT源代码
打开命令提示符，执行以下命令以克隆WABT的源代码：

git clone --recursive https://github.com/WebAssembly/wabt.git
cd wabt

创建构建目录
在WABT目录下创建一个构建目录：

mkdir build
cd build

使用CMake进行配置
运行CMake以配置构建环境。根据你的Visual Studio版本选择合适的生成器。例如，如果你使用的是Visual Studio 2017，可以运行：

cmake … -DCMAKE_BUILD_TYPE=DEBUG -DCMAKE_INSTALL_PREFIX=…\bin -G “Visual Studio 15 2017”

如果你使用的是MinGW，可以使用：我使用的是MinGW,即用的这个，如果你前面安装错误，请先删除原来的Makefiles等文件

cmake … -DCMAKE_BUILD_TYPE=DEBUG -DCMAKE_INSTALL_PREFIX=…\bin -G “MinGW Makefiles”

编译和安装
使用以下命令编译并安装WABT：

cmake --build . --config DEBUG --target install

设置环境变量
将WABT的可执行文件路径添加到系统环境变量中。可以通过以下步骤进行：

右键点击“此电脑”或“我的电脑”，选择“属性”。
点击“高级系统设置”。
在“系统属性”窗口中，点击“环境变量”。
在“系统变量”中找到“Path”，选择后点击“编辑”。
添加WABT的bin目录路径（例如 D:\webAssemblyTest\wabt\bin）。

验证安装
打开新的命令提示符窗口，输入以下命令以验证安装是否成功：

wasm2wat --version

如果成功安装，你应该能看到版本信息。

使用示例

将WAT文件转换为WASM文件：

wat2wasm example.wat -o example.wasm

将WASM文件转换为WAT文件：

wasm2wat example.wasm -o example.wat

通过以上步骤，你就可以在Windows上成功安装并使用WABT工具。

注意：到目前为止，你可以将你的wat文件转换成wasm文件了，或将wasm转换成wat文件，打开的编辑工具如VS等，写一段wat代码，保存为wat为后缀的文件，将转换成wasm试试
注意：以上的所有的工具或命令：cmake\wabt\MinGW\git\emcc在命令提示符cmd中不能正常运行时，请将CMD关闭后，再打开重试，如果不行则看下能否出现版本号，如果版本号能正常显示，那么关闭CMD后再打开运行命令是没有问题。