PricingLoginStart free
WebAssembly (WASM) for High Performance Apps · Lektion

C/C++ mit Emscripten zu WASM kompilieren

Richten Sie Ihre Umgebung ein und kompilieren Sie Ihr erstes C/C++-Programm mit der Emscripten-Toolchain in ein WebAssembly-Modul.

Lektion 1 von 411 Schritte

C/C++ mit Emscripten zu WASM kompilieren ist eine kostenlose WebAssembly (WASM) for High Performance Apps-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des WebAssembly (WASM) for High Performance Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der WebAssembly (WASM) for High Performance Apps-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Meet Emscripten!

Welcome! Today, we'll learn to compile C/C++ code into WebAssembly (WASM). The key tool for this is Emscripten.

Emscripten is a complete toolchain that takes C/C++ code and compiles it into WASM, along with "glue" JavaScript code to help run it in a web browser or Node.js environment.

Bridging C/C++ to WASM

Why Emscripten? Browsers don't understand C/C++ directly. Emscripten acts as a powerful translator.

  • It compiles your C/C++ into the efficient WASM binary format.
  • It generates JavaScript "glue" code to load the WASM module and interact with it from JavaScript.
  • It handles C/C++ standard library functions (like printf) by providing JavaScript equivalents.

Setting Up Emscripten

Setting up Emscripten involves downloading the Emscripten SDK (emsdk). This SDK contains everything you need: the emcc compiler, Node.js, Python, and other utilities.

Typically, you'd run commands like:

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

This prepares your environment to use emcc.

A Simple C Function

Let's start with a very simple C program. This program defines a function add and calls it from main. We'll compile this into WASM.

 #include <stdio.h>

// A simple C function to add two numbers
int add(int a, int b) {
    return a + b;
}

int main() {
    int result = add(5, 7);
    printf("Result of add(5, 7): %d\n", result);
    return 0;
}

The `emcc` Command

The heart of Emscripten is the emcc compiler. It's a drop-in replacement for gcc or clang that knows how to target WebAssembly.

You'll use emcc just like you would a standard C/C++ compiler, but with specific flags to control the WASM output.

Compiling Our C Code

Now, let's compile our add.c file. We'll tell emcc to output a JavaScript file that includes the compiled WASM module.

The command -o add.js tells Emscripten to create add.js (the glue code) and add.wasm (the binary module).

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add']" -s EXPORT_ES6=1

The Generated Files

After running the emcc command, you'll find two main files:

  • add.wasm: This is the actual WebAssembly binary module. It contains the compiled add function in a highly optimized, compact format.
  • add.js: This is the JavaScript "glue" code. It's responsible for loading add.wasm, setting up the WASM environment, and providing an interface to call functions exported from the WASM module.

What the Glue Does

The generated JavaScript glue code (e.g., add.js) is crucial. It handles:

  • Fetching and instantiating the .wasm file.
  • Setting up the WASM module's memory.
  • Converting JavaScript types to WASM types and vice-versa.
  • Providing an object (often named Module) to interact with the WASM module's exported functions.

This allows you to seamlessly call your C functions from JavaScript.

Optimizing Your WASM

Emscripten allows you to optimize your WASM output for size and speed. This is crucial for web performance.

You can use optimization flags similar to gcc:

  • -O0: No optimizations (fastest compile time).
  • -O1, -O2: Standard optimizations.
  • -O3: Aggressive optimizations (slower compile, smaller/faster code).
  • -Os: Optimize for size.
  • -Oz: Optimize aggressively for smallest size.

For production, emcc -O3 or emcc -Oz are common choices.

Quick Check: Emscripten

You've learned about Emscripten and its role. Let's test your understanding!

Beantworte es in der interaktiven Lektion

Recap: Compiling C/C++

In this lesson, you've taken your first step into WebAssembly with C/C++!

  • We introduced Emscripten as the toolchain for compiling C/C++ to WASM.
  • You saw how emcc compiles C code into .wasm and .js glue files.
  • We discussed the purpose of both the WASM binary and the JavaScript glue code.
  • You learned about basic optimization flags for emcc.

Next, we'll dive into how to load and run these WASM modules in a web browser using JavaScript!

Kostenlos starten

Lerne WebAssembly (WASM) for High Performance Apps mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse
12
Lektionen
48
Kostenlos lernenDen vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „C/C++ mit Emscripten zu WASM kompilieren“ kostenlos?

Ja — der vollständige Text von „C/C++ mit Emscripten zu WASM kompilieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des WebAssembly (WASM) for High Performance Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der WebAssembly (WASM) for High Performance Apps-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „C/C++ mit Emscripten zu WASM kompilieren“?

Richten Sie Ihre Umgebung ein und kompilieren Sie Ihr erstes C/C++-Programm mit der Emscripten-Toolchain in ein WebAssembly-Modul. Du übst WebAssembly (WASM) for High Performance Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um WebAssembly (WASM) for High Performance Apps zu starten?

Keine Vorkenntnisse erforderlich. WebAssembly (WASM) for High Performance Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „C/C++ mit Emscripten zu WASM kompilieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser WebAssembly (WASM) for High Performance Apps-Lektion Code schreiben und ausführen?

Ja. Jede WebAssembly (WASM) for High Performance Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. C/C++ mit Emscripten zu WASM kompilieren
  2. WASM in JavaScript laden und ausführen
  3. Grundlegender Datenaustausch: Primitive
  4. JavaScript-Funktionen aus C/C++ aufrufen
← Zurück zu WebAssembly (WASM) for High Performance Apps