본문으로 건너뛰기

Emscripten

References

Install​

git clone https://github.com/emscripten-core/emsdk.git \
&& cd emsdk
./emsdk install 3.0.0
./emsdk activate 3.0.0
source ./emsdk_env.sh

Setup​

<package>/
├── CMakeLists.txt
├── c_src/
│   ├── funcs.cpp
│   ├── funcs.h
│   └── <target>.cpp
└── test/
    └── ...
CMakeLists.txt
cmake_minimum_required(VERSION 3.15)
set(PROJECT_NAME "<target>")
project(${PROJECT_NAME} LANGUAGES CXX)

set(TARGET_NAME "${PROJECT_NAME}")

set(SOURCE
    "c_src/funcs.cpp"
    "c_src/<target>.cpp"
)

add_executable(${TARGET_NAME} ${SOURCE})

target_link_options(${TARGET_NAME} PUBLIC "--bind")

Wrapper​

c_src/funcs.h
#pragma once

#include <string>

std::string hello(void);
int         add(int a, int b);
c_src/funcs.cpp
#include "funcs.h"

std::string hello(void) { return "Hello World!"; }

int add(int a, int b) { return a + b; }
c_src/<target>.cpp
#include "funcs.h"

#include <emscripten/bind.h>

using namespace emscripten;

EMSCRIPTEN_BINDINGS(my_module) {
    function("hello", &hello);
    function("add", &add);
}

Build​

emcmake cmake -S . -B build
cmake --build build -j$(expr $(expr $(nproc) \* 6) \/ 5)
<package>/
├── build/
│   ├── <target>.js
│   ├── <target>.wasm*
│   └── ...
└── ...

Test​

test/test.html
<!doctype html>
<html>
	<script>
		var Module = {
			onRuntimeInitialized: function () {
				document.body.innerHTML = `<div>${Module.hello()}</div>
        <div>1 + 2 = ${Module.add(1, 2)}</div>`;
			},
		};
	</script>
	<script src="../build/target.js"></script>

	<body></body>
</html>