ترجمة C/C++ إلى WASM باستخدام Emscripten
أعدّ بيئتك وترجم أول برنامج C/C++ إلى وحدة WebAssembly باستخدام سلسلة أدوات Emscripten
ترجمة C/C++ إلى WASM باستخدام Emscripten درس مجاني في WebAssembly (WASM) for High Performance Apps على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في WebAssembly (WASM) for High Performance Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
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.gitcd 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=1The 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 compiledaddfunction in a highly optimized, compact format.add.js: This is the JavaScript "glue" code. It's responsible for loadingadd.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
.wasmfile. - 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
emcccompiles C code into.wasmand.jsglue 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!
الأسئلة الشائعة
هل درس «ترجمة C/C++ إلى WASM باستخدام Emscripten» مجاني؟
نعم — نص درس «ترجمة C/C++ إلى WASM باستخدام Emscripten» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة WebAssembly (WASM) for High Performance Apps، انتقل إلى CoddyKit PRO. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.
ماذا ستتعلم في «ترجمة C/C++ إلى WASM باستخدام Emscripten»؟
أعدّ بيئتك وترجم أول برنامج C/C++ إلى وحدة WebAssembly باستخدام سلسلة أدوات Emscripten تتمرن على WebAssembly (WASM) for High Performance Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ WebAssembly (WASM) for High Performance Apps؟
لا تُشترط خبرة سابقة. WebAssembly (WASM) for High Performance Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «ترجمة C/C++ إلى WASM باستخدام Emscripten»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس WebAssembly (WASM) for High Performance Apps هذا؟
نعم. كل درس في WebAssembly (WASM) for High Performance Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ترجمة C/C++ إلى WASM باستخدام Emscripten
- تحميل WASM وتشغيله في JavaScript
- تبادل البيانات الأساسي: الأنواع البدائية
- استدعاء دوال JavaScript من C/C++