คอมไพล์ C/C++ เป็น WASM ด้วย 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.

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 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.

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.

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.

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).

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.

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.

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.

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!