Всем привет!
За последний год я увидел несколько проектов, которые требовали интеграции разделяемых библиотек, написанных на C ++, с веб-приложениями на основе React. Однако сложно найти несколько простых руководств, которые бы полностью объяснили процесс интеграции. Так что это скромный шаг в этом направлении. Без лишних слов, приступим!

Базовая настройка приложения React

В этом разделе описаны действия по настройке базового приложения для реагирования. Если вы уже знаете, как это сделать, смело переходите к следующему разделу.

Как и ожидалось, нам нужно сначала создать такой базовый проект npm.

mkdir sample
cd sample
npm init -y

Затем давайте установим React и его зависимости.

npm install react react-dom

Затем давайте настроим несколько базовых файлов HTML и js.

index.html

index.js

Хорошо, давайте установим webpack, babel и связанные с ними зависимости.

npm install -D webpack webpack-dev-server webpack-cli @babel/core babel-loader @babel/preset-react html-webpack-plugin

webpack.config.js

Наконец, давайте добавим эти команды в наш раздел скриптов в package.json.

"start": "webpack serve"
"build": "webpack"

Теперь у вас должна быть возможность запускать веб-приложение через

npm run start

Посетите http: // localhost: 8080, чтобы увидеть свое веб-приложение в действии.

Настройка WebAssembly

Хорошо, теперь давайте создадим образец файла C ++, в котором будет отображаться только функция для сложения двух чисел и возврата результата.

cpp / Sample.h

cpp / Sample.cpp

Затем мы создадим привязку, которая определяет, как функция может быть вызвана из JS, и ее семантику возврата.

bindings / SampleBindings.cpp

Наконец, мы будем использовать emscripten, чтобы скомпилировать это в WebAssembly. Для этого давайте сначала установим emscripten и добавим его в наш путь поиска, выполнив шаги здесь.

Теперь мы можем просто использовать em ++ для компиляции нашего файла C ++ в модуль WASM.

emcc --bind bindings/SampleBindings.cpp -Icpp/ cpp/*.cpp -s WASM=1 -s MODULARIZE=1 -o Sample.js

Интеграция WASM с React

Хорошо, пора собрать все воедино. Чтобы загрузить файл wasm в наше приложение для реагирования, нам нужно установить загрузчик файлов и обновить конфигурацию нашего веб-пакета, чтобы он воспринимался как файл ресурсов.

npm install -D file-loader

webpack.config.js

Затем мы можем загрузить файл JS и указать ему URI файла wasm.

Вызов функции C ++ из JS

Теперь мы готовы сложить наши два числа в JS через наш модуль WASM.

Вы должны увидеть цифру «3» на консоли. :)

Полный репозиторий git для этого примера доступен по адресу https://github.com/gupnik/WebAssemblyReact/tree/master/Part%20I.

Если вы заинтересованы в использовании OpenGL через WebAssembly, ознакомьтесь с частью II здесь.