03的开发日志
0%

WebAssembly学习笔记（1）

发表于 更新于 分类于
本文字数： 5.1k 阅读时长 ≈ 5 分钟
  1. 安装
    1. 安装Emscripten SDK
    2. 编译C++代码
    3. 运行静态目录
    4. 快捷激活emsdk环境
  2. Hello World
  3. 无法引用windows.h

WebAssembly - 安装 - 菜鸟教程 (cainiaoya.com)

开发者引导 - WebAssembly 中文网|Wasm 中文文档

安装

目标：将C++代码编译为WebAssembly

安装Emscripten SDK

拷贝仓库：

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

下载安装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
PS D:\codes\wasm\emsdk> cd emsdk
PS D:\codes\wasm\emsdk> .\emsdk install latest
Resolving SDK alias 'latest' to '3.1.62'
Resolving SDK version '3.1.62' to 'sdk-releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'
Installing SDK 'sdk-releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'..
Installing tool 'node-18.20.3-64bit'..
Downloading: D:/codes/wasm/emsdk/downloads/node-v18.20.3-win-x64.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v18.20.3-win-x64.zip, 30476796 Bytes
Unpacking 'D:/codes/wasm/emsdk/downloads/node-v18.20.3-win-x64.zip' to 'D:/codes/wasm/emsdk/node/18.20.3_64bit'
Done installing tool 'node-18.20.3-64bit'.
Installing tool 'python-3.9.2-nuget-64bit'..
Downloading: D:/codes/wasm/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.9.2-4-amd64+pywin32.zip, 14413267 Bytes
Unpacking 'D:/codes/wasm/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip' to 'D:/codes/wasm/emsdk/python/3.9.2-nuget_64bit'
Done installing tool 'python-3.9.2-nuget-64bit'.
Installing tool 'java-8.152-64bit'..
Downloading: D:/codes/wasm/emsdk/downloads/portable_jre_8_update_152_64bit.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip, 69241499 Bytes
Unpacking 'D:/codes/wasm/emsdk/downloads/portable_jre_8_update_152_64bit.zip' to 'D:/codes/wasm/emsdk/java/8.152_64bit'
Done installing tool 'java-8.152-64bit'.
Installing tool 'releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'..
Downloading: D:/codes/wasm/emsdk/downloads/d52176ac8e07c47c1773bb2776ebd91e3886c3af-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/d52176ac8e07c47c1773bb2776ebd91e3886c3af/wasm-binaries.zip, 513762888 Bytes
Unpacking 'D:/codes/wasm/emsdk/downloads/d52176ac8e07c47c1773bb2776ebd91e3886c3af-wasm-binaries.zip' to 'D:/codes/wasm/emsdk/upstream'
Done installing tool 'releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'.
Done installing SDK 'sdk-releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'.

会把相关的依赖（node、python、java等）安装到wasm目录下

然后执行以下命令激活：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
PS D:\codes\wasm\emsdk> .\emsdk activate latest
Resolving SDK alias 'latest' to '3.1.62'
Resolving SDK version '3.1.62' to 'sdk-releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit'
Setting the following tools as active:
   node-18.20.3-64bit
   python-3.9.2-nuget-64bit
   java-8.152-64bit
   releases-d52176ac8e07c47c1773bb2776ebd91e3886c3af-64bit

Next steps:
- Consider running `emsdk activate` with --permanent or --system
  to have emsdk settings available on startup.
Adding directories to PATH:
PATH += D:\codes\wasm\emsdk
PATH += D:\codes\wasm\emsdk\upstream\emscripten

Setting environment variables:
PATH = D:\codes\wasm\emsdk;D:\codes\wasm\emsdk\upstream\emscripten; // ......省略一大串已有的系统环境变量
EMSDK = D:/codes/wasm/emsdk
EMSDK_NODE = D:\codes\wasm\emsdk\node\18.20.3_64bit\bin\node.exe
EMSDK_PYTHON = D:\codes\wasm\emsdk\python\3.9.2-nuget_64bit\python.exe
JAVA_HOME = D:\codes\wasm\emsdk\java\8.152_64bit
The changes made to environment variables only apply to the currently running shell instance. Use the 'emsdk_env.bat' to re-enter this environment later, or if you'd like to register this environment permanently, rerun this command with the option --permanent.

（这里环境变量设置是在当前命令行，不是全局的。如果要全局生效，请执行emsdk_env.bat）

编译C++代码

1
emcc source.cpp -s WASM=1 -o source.html

将输出：source.html, source.js, source.wasm

1
emcc source.cpp -s STANDALONE_WASM

仅输出：source.wasm

运行静态目录

1
emrun --port 8080 .

快捷激活emsdk环境

1
2
3
4
set curpath=%~dp0
cd D:\codes\wasm\emsdk\
.\emsdk activate latest
cd %curpath%

Hello World

新建main.cpp

1
2
3
4
5
6
7
#include <iostream>

int main()
{
    std::cout << "Hello World" << std::endl;
    return 0;
}

编译：

1
emcc main.cpp -s WASM=1 -o index.html

运行：

1
emrun .

效果：

image-20240710122103919

无法引用windows.h

结果发现，要读取注册表，需要引用Windows.h，然后编译的时候，产生如下报错：

1
2
3
4
5
6
PS D:\codes\wasm\emsdk\upstream\emscripten> .\emcc 'd:\codes\wasm\Hello World\main.cpp' -s WASM=1 -o 'd:\codes\wasm\Hello World\index.html'
d:\codes\wasm\Hello World\main.cpp:2:10: fatal error: 'windows.h' file not found
    2 | #include <windows.h>
      |          ^~~~~~~~~~~
1 error generated.
emcc: error: 'D:/codes/wasm/emsdk/upstream/bin\clang.exe -target wasm32-unknown-emscripten -fignore-exceptions -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --sysroot=D:\codes\wasm\emsdk\upstream\emscripten\cache\sysroot -DEMSCRIPTEN -Werror=implicit-function-declaration -Xclang -iwithsysroot/include\fakesdl -Xclang -iwithsysroot/include\compat "d:\codes\wasm\Hello World\main.cpp" -c -o C:\Users\whuls\AppData\Local\Temp\emscripten_temp_ee29c2ed\main_0.o' failed (returned 1)

can not build C with · Issue #153 · emscripten-core/emsdk · GitHub

究其原因是，WebAssembly编译的是跨平台的代码，无法编译成平台特定的代码，因此失败了……