我想要在 CLion 上使用 Emscripten 进行开发

2 年 ago
新, 韵
1 minute

首先

由于想尝试Emscripten，所以我在CLion（JetBrains的C/C++集成开发环境）中进行了环境设置。

我在撰写文章时使用了以下的工具。

    • Windows 10

 

    • CLion 2019.1

 

    • Emscripten 1.38.28 (NodeJS 8.9.1)

 

    • NodeJS 11.13.0

 

    • Chrome 73.0.3683.103

 

    Firefox 66.0.2

筹备

安装 Emscripten SDK。

    Developer’s Guide

根据Windows 10的情况，似乎可以在WSL上安装Linux版。但是，由于我的WSL上emcc无法正常工作，所以我会在Windows上安装它。由于CLion可以使用WSL上的编译器作为工具链，所以如果没有问题的话，也可以在WSL上进行。

我认为最好从GitHub上克隆，以便进行与Linux相同的步骤，而不是下载并解压缩zip文件的”Windows 7及更早版本的安装”。

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

运行emsdk需要单独的Python环境。

只需要在使用控制台上的emsdk时才运行”emsdk_env.bat”。如果在CLion上使用，它不是必需的。

安装CLion

    1. 我們可以直接下載 CLion 的安裝程式並進行安裝。

 

    作為 Toolchain，我們將安裝 MinGW。

对CLion进行配置。

190407_2.png

尝试使用 Emscripten 进行实际操作

创建项目

    1. 打开CLion，选择“新建项目”，然后选择“C ++可执行文件”，随意创建。

 

    首先进行构建并确认是否能够正常运行。

设置Emscripten的构建配置

    1. 点击 “文件 – 设置” 打开环境设置。

 

    1. 选择 “构建、执行、部署 – CMake”。

 

    在 “CMake选项” 中指定 Emscripten 的工具链文件 (Emscripten.cmake)。使用之前指定的 “EMSCRIPTEN”。
-DCMAKE_TOOLCHAIN_FILE=${EMSCRIPTEN}/cmake/Modules/Platform/Emscripten.cmake
190407_8_.png

我会用这个进行一次构建。

设置 Emscripten 的执行配置

190407_3.png
190407_4.png

编写代码并运行程序

通常情况下，构建设置和调试（执行）设置是相同的，但是在这种情况下，由于构建是使用CMake（C++），而调试是使用NodeJS（JavaScript），所以需要注意。请在构建时和运行时进行切换，或者设置为NodeJS并始终使用“全部”来进行构建。

调试

我被彻底迷住了。

目前的结论是使用常规的gcc/clang进行本地构建和调试，一切就绪后再将项目迁移到 Web 上是比较安全的选择。

NodeJS -> 节点JS

通过首先设置 CLion 中的 NodeJS 调试配置，可以从 CLion 进行调试执行。但是，无法对 C++ 源代码设置断点（只能看到 wasm 的汇编代码）。可以在 JavaScript 部分设置断点，从而可以进行断点调试。

190407_5.png

如果在编译选项中指定-g4，将会创建源映射文件，但即使创建了也无法看到（与–source-map-base无关）。如果要在CMakeLists.txt中编写，可以按以下方式进行。

if (EMSCRIPTEN)
    set(CMAKE_CXX_FLAGS_DEBUG "-g4")
endif()

谷歌浏览器

将生成的构建文件转换为HTML格式，可以在浏览器中打开，并通过浏览器的JavaScript引擎执行，还可以使用浏览器的调试器。

if (EMSCRIPTEN)
    set(CMAKE_CXX_FLAGS_DEBUG "-g4")
    set(CMAKE_EXECUTABLE_SUFFIX ".html")
endif()

在 CMakeLists.txt 中进行上述定义并进行构建。从控制台使用 emrun 启动简易 Web 服务器。（请先执行 emsdk_env.bat）。

emrun --no_browser --port 8080 .

当使用Chrome从http://localhost:8080/访问构建结果的html时会执行。虽然可以从开发者工具中使用调试器进行断点调试，但在这里无法访问C++部分的源代码。

190407_7.png

然而，当直接使用emcc进行构建而没有使用CMake时，可以通过调试器在C++代码上设置断点。

emcc -g4 -o HelloWorld.html main.cpp
190407_6.png

当比较这两个构建结果时，我们可以看到构建结果中包含的地图信息路径名称存在差异。对于 emcc 构建的结果，只有文件名。而使用 CMake 构建的结果则以完整路径进行写入。另外，一个重要的区别是，CMake 构建的地图文件中 “sources” 部分的文件名出现了异常。

"sources":["D","C"]

"sources":["main.cpp","C"]

也许 D 和 C 是因为驱动器信封而变得如此，我猜想这可能是因为无法正确处理后面的冒号而导致的。所以如果是 Mac 或 Linux，可能就不会成为问题。

即使是直接在emcc上构建的版本，NodeJS也无法对C++代码进行中断。

火狐浏览器

在C++代码中无法像在Chrome中那样进行断点，尽管在Firefox的设置中启动了源映射。但是可以在JavaScript部分设置断点。

最后

基本上来说，这篇文章归结起来是

    • Emscripten SDK + CMake でビルド

 

    NodeJS で実行、デバッグ

由于只是在做的工作，所以没有必要使用CLion，但是如果在CLion上操作并且了解流程的话，环境搭建会相对容易一些（步骤较少）。而且，编辑器也很方便，所以我认为还不错。但是，我也想抽个空试试看实际上使用VS Code是否更方便。

最近，一个名为WebAssebly Studio的适用于浏览器的IDE被宣布发布。我认为将来它可能成为一个有力的选择，但目前仍然有待发展，所以我们期待它未来的进步。

尽管我以前对JetBrains的IDE没有太多好感，但我发现CLion非常易于使用，因此我希望以后积极地使用它。希望将Emscripten作为标准支持也会很好。

✖
广告
将在 10 秒后关闭
bannerAds