5 配置开发环境

在上一篇中，我们已经完成了 Emscripten 的安装，确保我们的开发环境能够支持 WebAssembly 的构建和运行。现在，我们需要对开发环境进行进一步的配置，以确保我们的 WebAssembly 项目能够顺利进行。

1. 配置环境变量

为了方便后续的开发，我们需要将 Emscripten 的工具链路径添加到系统的环境变量中。这样可以在任何终端中方便地使用 emcc 和其他工具。

Windows 用户

1. 找到 Emscripten 的安装目录，通常位于 C:\Program Files\Emscripten\emsdk。

2. 打开“控制面板” > “系统和安全” > “系统” > “高级系统设置”。

3. 点击“环境变量”按钮。

4. 在“系统变量”部分，找到 Path 变量并选择它，点击“编辑”。

5. 点击“新建”，然后添加以下路径（根据你的安装路径调整）：

   C:\Program Files\Emscripten\emsdk
   C:\Program Files\Emscripten\emsdk\emscripten\<version>

6. 保存所有窗口，并重启命令行窗口。

macOS/Linux 用户

打开终端，编辑你的 ~/.bashrc、~/.bash_profile 或 ~/.zshrc 文件（根据你使用的 shell）并添加以下行：

export PATH="$PATH:/path/to/emsdk:/path/to/emsdk/emscripten/<version>"

不要忘记替换 /path/to/emsdk 和 <version> 为你实际的 Emscripten 安装路径和版本号。

执行以下命令使配置生效：

source ~/.bashrc  # 或 ~/.bash_profile / ~/.zshrc

2. 验证 Emscripten 安装

配置完环境变量后，我们可以通过命令行验证 Emscripten 是否安装成功。打开新的终端，输入以下命令：

emcc -v

如果显示出 Emscripten 的版本信息，说明安装并配置成功。

3. 安装和配置其他开发工具

为了提升开发效率，我们还可以考虑安装一些其它的开发工具和插件，如 CMake 和 Visual Studio Code。

安装 CMake

CMake 是一个强大的跨平台构建工具，支持生成项目文件和管理构建过程。可以通过以下方式安装：

• Windows: 下载 CMake的安装程序，并按提示完成安装。

• macOS: 使用 Homebrew 安装：

  brew install cmake

• Linux: 使用包管理器，例如在 Ubuntu 上：

  sudo apt install cmake

安装后，可以通过运行 cmake --version 在命令行中验证。

配置 Visual Studio Code

如果你选择使用 Visual Studio Code 作为开发环境，你可以通过以下步骤进行配置：

1. 下载并安装 Visual Studio Code。
2. 安装 C/C++ 插件和 CMake Tools 插件，以支持 C/C++ 编程和 CMake 项目的构建。
3. 创建一个新的项目文件夹，并在该文件夹中创建一个 CMakeLists.txt 文件，配置基本的项目参数。

cmake_minimum_required(VERSION 3.4)
project(MyWebAssemblyProject)

set(CMAKE_CXX_STANDARD 11)

add_executable(my_project main.cpp)

4. 确保你的代码文件（如 main.cpp）位于项目文件夹中。

4. 测试开发环境

为了确认配置的正确性，我们建议尝试编写一个简单的 C++ 文件并将其编译为 WebAssembly。在你的项目根目录下，创建一个 main.cpp 文件，内容如下：

#include <emscripten/emscripten.h>
#include <iostream>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    int add(int a, int b) {
        return a + b;
    }
}

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

然后在命令行中，编译这个文件为 WebAssembly：

emcc main.cpp -o index.html -s EXPORTED_FUNCTIONS='["_add", "_main"]'

这个命令会生成一个 index.html 文件以及相关的 WebAssembly 文件，可以通过 web 浏览器打开 index.html 进行测试。

总结

至此，我们已经成功配置了 WebAssembly 的开发环境，包括设置环境变量、安装必要的工具以及验证我们能否成功编译一个简单的项目。下一篇中，我们将一起创建第一个 WebAssembly 项目，进一步探索 WebAssembly 的魅力。请继续关注！