نصوص وحدات ES من النوع type=module
تحميل JavaScript كوحدات ES باستخدام type=module
نصوص وحدات ES من النوع type=module درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما هي ES Modules؟
وحدة ES هي ملف JavaScript يستخدم تصريحي import وexport. وللوحدات نطاقها الخاص (من دون تلويث النطاق العام)، وتعمل افتراضيًا في الوضع الصارم، وتعلن تبعياتها صراحةً، مما يحل مشكلات ترتيب وسوم script المتراكمة على مدى عقود.
وسم script الخاص بالوحدات
يخبر <script type="module" src="app.js"> المتصفحَ بأن الملف وحدة. يحلل المتصفح عمليات الاستيراد، ويجلب التبعيات بالتوازي، ولا ينفذ نقطة الدخول إلا بعد تنزيل رسم التبعيات بالكامل وتجميعه.
<script type="module" src="app.js"></script>الوحدات مؤجلة
تتصرف نصوص الوحدات كما لو أنها تستخدم defer: إذ تُنزَّل بالتوازي مع تحليل HTML، وتُنفَّذ بعد اكتمال التحليل وفق ترتيب التصريح. يمكنكم وضع <script type="module"> في أي مكان (حتى داخل <head>) من دون حجب الصفحة.
تستخدم عمليات الاستيراد محددات
يستخدم تصريح الاستيراد محددًا، قد يكون عنوان URL نسبيًا (./utils.js)، أو عنوان URL مطلقًا (https://cdn.example.com/lib.js)، أو اسمًا عاريًا (lodash). تتطلب الأسماء العارية خريطة استيراد (سنغطيها لاحقًا)، لأن المتصفح لا يعرف الملف الذي تشير إليه.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));امتدادات الملفات مطلوبة
لا يضيف المتصفح تلقائيًا .js إلى محددات الاستيراد. يفشل import "./utils"، بينما يعمل import "./utils.js". قد تكون أدوات التجميع وNode أكثر تساهلًا، لكن المتصفح صارم؛ لذلك اكتبوا الامتداد صراحةً.
يلزم CORS
تُجلب الوحدات دائمًا باستخدام CORS، حتى عند كونها من المصدر نفسه. يجب أن ترسل ملفات الوحدات من مصادر مختلفة ترويسة Access-Control-Allow-Origin المناسبة، وإلا يفشل الاستيراد. تضبط معظم شبكات CDN (مثل esm.sh وjsdelivr وunpkg) ذلك بصورة صحيحة من البداية.
await على المستوى الأعلى
تدعم الوحدات استخدام await على المستوى الأعلى، من دون الحاجة إلى غلاف دالة غير متزامنة: const data = await fetch("/api").then(r => r.json()). ينتظر مستهلكو الوحدة حتى يكتمل await على المستوى الأعلى قبل تنفيذهم.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);الوحدات مفردة
تُقيَّم الوحدة مرة واحدة بالضبط في كل جلسة، بصرف النظر عن عدد الوحدات الأخرى التي تستوردها. ويُشارك كائن الصادرات؛ إذ يرى كل مستهلك النسخة نفسها، مما يجعل الوحدات وسيلة واضحة لمشاركة كائنات مفردة مثل كائن إعدادات أو مخزن حالة.
الوحدات المضمّنة
يمكنكم أيضًا كتابة الوحدات بشكل مضمّن: <script type="module">import x from "./y.js"; ...</script>. يفيد ذلك في شيفرة التهيئة أو التجارب، إلا أن الملفات الخارجية أسهل في تصحيحها وتخزينها مؤقتًا.
استخدام nomodule كبديل للمتصفحات القديمة
يمكنكم إقران <script type="module"> مع <script nomodule src="legacy.js">. تشغّل المتصفحات الحديثة الوحدة وتتجاهل نص nomodule، بينما تشغّل المتصفحات القديمة نص nomodule وتتجاهل الوحدة. يُستخدم ذلك أثناء الانتقال إلى تطبيقات ESM بالكامل.
الأخطاء وفشل الاستيراد
يؤدي فشل الاستيراد (بسبب 404 أو CORS أو خطأ نحوي) إلى إطلاق استثناء، ويمنع تنفيذ رسم الوحدات بأكمله. استخدموا لوحة Network لاكتشاف طلبات الوحدات الفاشلة، ولوحة Console لقراءة رسالة خطأ الاستيراد الفعلية.
اختبار المعرفة
لماذا تتصرف نصوص الوحدات كما لو أن defer مضبوط، من دون أن تحددوه بأنفسكم؟
الخلاصة
يحمّل <script type="module"> وحدات ES، وهي ملفات تعمل في الوضع الصارم وتحتوي على تصاريح import/export تحل رسم التبعيات. تُؤجَّل الوحدات افتراضيًا، وتتطلب امتدادات ملفات صريحة، وتُجلب باستخدام CORS، وتُقيَّم كنسخ مفردة، وتدعم await على المستوى الأعلى. استخدموا nomodule كبديل للمتصفحات القديمة، وانتبهوا إلى امتدادات الملفات المفقودة عند فشل الاستيرادات دون ظهور سبب واضح.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «نصوص وحدات ES من النوع type=module» مجاني؟
نعم — نص درس «نصوص وحدات ES من النوع type=module» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «نصوص وحدات ES من النوع type=module»؟
تحميل JavaScript كوحدات ES باستخدام type=module تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «نصوص وحدات ES من النوع type=module»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نصوص وحدات ES من النوع type=module
- خرائط الاستيراد importmap
- الاستيراد الديناميكي import() في الوحدات
- أساسيات Module Federation