0Pricing
WebAssembly (WASM) for High Performance Apps · Pelajaran

Mengompilasi C/C++ ke WASM dengan Emscripten

Siapkan lingkungan Anda dan kompilasikan program C/C++ pertama menjadi modul WebAssembly menggunakan toolchain Emscripten.

Mengompilasi C/C++ ke WASM dengan Emscripten adalah pelajaran WebAssembly (WASM) for High Performance Apps gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar WebAssembly (WASM) for High Performance Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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!

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!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengompilasi C/C++ ke WASM dengan Emscripten” gratis?

Ya — teks lengkap “Mengompilasi C/C++ ke WASM dengan Emscripten” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus WebAssembly (WASM) for High Performance Apps, upgrade ke CoddyKit PRO. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengompilasi C/C++ ke WASM dengan Emscripten”?

Siapkan lingkungan Anda dan kompilasikan program C/C++ pertama menjadi modul WebAssembly menggunakan toolchain Emscripten. Kamu berlatih WebAssembly (WASM) for High Performance Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai WebAssembly (WASM) for High Performance Apps?

Tidak diperlukan pengalaman sebelumnya. WebAssembly (WASM) for High Performance Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengompilasi C/C++ ke WASM dengan Emscripten” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran WebAssembly (WASM) for High Performance Apps ini?

Ya. Setiap pelajaran WebAssembly (WASM) for High Performance Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Mengompilasi C/C++ ke WASM dengan Emscripten
  2. Memuat & Menjalankan WASM dalam JavaScript
  3. Pertukaran Data Dasar: Primitif
  4. Memanggil Fungsi JavaScript dari C/C++
← Kembali ke WebAssembly (WASM) for High Performance Apps