Всем привет!
За последний год я увидел несколько проектов, которые требовали интеграции разделяемых библиотек, написанных на 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 здесь.