Как скрестить Clion, Emscripten и Cmake

В этой статье я хотел бы пройтись и показать основные моменты того, как настроить IDE CLion для компиляции CMake проекта средствами Emscripten. Когда я занимался этим скрещиванием мне пришлось потратить день или два на эксперименты. И в этой заметке я собираюсь собрать некое "how to", которое в итоге сработало.

Предварительные требования

Главным требованием, чтобы все завелось с полпинка очень важно уже иметь установленный Python желательно 3-й версии. Так же python должен быть доступен из командной строки\

Cmake будет нужен минимально версии 3.13

И конечно не забываем про Git

Настраиваем Emscripten

Скачиваем emsdk. ( https://github.com/emscripten-core/emsdk )

И из командной строки делаем следующие шаги:

1. Скачиваем последнюю версию Emscripten

   ./emsdk install latest

2. Активируем последнюю версию

   ./emsdk activate latest

И оставляем все именно в таком состоянии. Официальный help для emsdk содержит еще шаги, но они нужны для компиляции из командной строки. Мы собираемся компилировать из IDE.

Настраиваем CLion

Запускаем, создаем новый проект. И заходим в File -> Settings. А в появившемся окне выбираем Build, Execution, Deployment -> Toolchains.

Если вы уже используете CLion под Windows, то у вас с большей долей вероятности уже установлен MSYS2 ( современная версия MinGW ). Поэтому его скачивание и установку gcc пакетов для с++ header'ов я молчаливо пропущу.

Под Linux это окно немного отличается, но вот как выглядит окно настройки Toolchain в итоге под Windows:

Выбираем + и в появившемся меню выбираем MinGW.

В Environment прописываем путь к внутрь MSYS2. В моем случае MSYS2 установлен в папку e:\msys64

В CMake по желанию прописываем путь к внешне установленному экземпляру оного (особенно, если у вас устаревшая версия CLion и CMake тоже устаревшей версии).

! В C Compiler и C++ Compiler прописываем пути к этим .bat файлам. Для Linux среды просто уберите .bat расширение. Суть в том, что Emscripten для компиляции использует python скрипты, а эти shell скрипты просто вызывают эти python файлы.

Далее переходим в пункт CMake. И тут создаем target компиляции:

В Toolchains выбираем только что созданный toolchain

Добавляем главный компонент пьесы: В CMake Options прописываем волшебную строчку -DCMAKE_TOOLCHAIN_FILE= и путь к внутри emsdk директории к файлу Emscripten.cmake.

Emscripten.cmake и пути в C Compiler и C++ Compiler - это что заставляем все в итоге работать.

Пишем конфигурацию для CMake.

Тут все уже должно работать из коробки. И проект будет компилироваться по нажатию Build->Build Project. Но есть несколько полезных моментов, которые стоило бы упомянуть.

1. Если проект представляет из себя не библиотеку, а приложение, то рекомендую специально выставить для выходного файла расширение .js

   set(CMAKE_EXECUTABLE_SUFFIX .js)

2. У Emscripten флаги для компиляторара и флаги для линкера совмещены вместе. Видимо изначально товарищи планировали, что emcc будет выдавать готовый .js файл. Но как только проект состоит из больше, чем 1 файл, логика процесса немного ломается
   
   В действительности, некоторые флаги из ссылки из предыдущего абзаца можно использовать и только для linker'а, без указания их в флагах компилятора. Например:

   target_link_options(project PUBLIC "SHELL: --pre-js ${CMAKE_CURRENT_SOURCE_DIR}/prejs.js --js-library ${CMAKE_CURRENT_SOURCE_DIR}/jsLib.js")
   target_link_options(project PUBLIC "SHELL: -s USE_GLFW=3 --preload-file glsl -s ALLOW_MEMORY_GROWTH=1")

   target_link_options появился в недавних версиях Cmake и позволяет добавлять параметры в коммандную строку для линкера. Из интересных команд здесь можно выделить --preload-file За счет этого чуда, полностью вся директория glsl вместе с файлами, закидывает внутрь bundle'а. И доступна через обычные файловые операции.

3. В моем проекте мне нужно билдить вспомогательные программы, которые генерируют код. Для emscripten версии билдятся в .js файлы и запускаются при помощи nodejs. И чтобы запускаемый .js из nodejs смотрел на реальную файловую систему я добавляю один маленький флаг для компиляции:
   
   target_link_options(glslangValidator PUBLIC -s NODERAWFS=1)

Итого

В данной статье мы рассмотрели основные моменты, с которыми сталкиваются при конфигурации компиляции проекта из CLion средствами Emscripten.

Надеюсь на адекватную критику от сообщества