mac 使用 vscode 完成WebAssembly的简单编译

在 Mac 上使用 VS Code 完成 WebAssembly 的简单编译，需要遵循以下步骤：

1. 安装 C++ 编译器

WebAssembly 依赖于编译器来将源代码编译成 wasm 格式。在 Mac 上需要安装 C++ 编译器。可以在终端中执行以下命令安装：

xcode-select --install

2. 安装 Emscripten

Emscripten 是一个将 C++ 代码编译成 WebAssembly 的工具链。在终端中执行以下命令安装 Emscripten：

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

3. 创建 C++ 项目

在 VS Code 中创建一个 C++ 项目。可以使用 CMake 工具来管理项目。在项目中创建一个 C++ 文件，例如 `main.cpp`，并编写一些代码。

4. 配置 CMakeLists.txt

在项目根目录下创建一个 `CMakeLists.txt` 文件，并配置编译选项。以下是一个简单的示例：

cmake_minimum_required(VERSION 3.10)
project(myproject)

set(CMAKE_CXX_STANDARD 11)

# Add the emscripten toolchain file
set(CMAKE_TOOLCHAIN_FILE "/path/to/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake")

# Set the output directory
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/bin)

# Add the source files
add_executable(myproject main.cpp)

其中，`/path/to/emsdk` 需要替换为实际的 Emscripten 安装路径。

5. 编译项目

在 VS Code 中打开终端，进入项目根目录，并执行以下命令编译项目：

mkdir build
cd build
cmake ..
make

6. 编译为 WebAssembly

在上一步的编译完成后，在终端中执行以下命令将项目编译为 WebAssembly 格式：

emcc main.cpp -o main.wasm

7. 运行 WebAssembly

在上一步的编译完成后，将生成一个 `main.wasm` 文件。可以使用任何支持 WebAssembly 的运行时环境来运行该文件，例如浏览器或 Node.js。

在浏览器中运行 WebAssembly，可以在 HTML 文件中添加以下代码：

<script>
  fetch('main.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(module => {
      console.log(module.exports.add(1, 2)); // 输出 3
    });
</script>

其中，`add` 是在 C++ 代码中定义的一个函数。

以上就是在 Mac 上使用 VS Code 完成 WebAssembly 的简单编译的步骤。