Frontend Academy · درس

وحدات ES: import وexport وdynamic import

استخدم عمليات التصدير المسمّاة والافتراضية، واستيرادات مساحات الأسماء، وحمّل الشيفرة عند الطلب باستخدام dynamic import() لتحسين الأداء.

وحدات ES: import وexport وdynamic import درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

مراجعة: أساسيات وحدات ES

تمنح وحدات ES كل ملف نطاقًا خاصًا به. وتشارك الصادرات المسمّاة قيمًا محددة، بينما تشارك الصادرات الافتراضية القيمة الأساسية. ويحلّ bundler أو المتصفح عمليات الاستيراد وقت التحميل.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree Shaking — لماذا تهم الصادرات المسمّاة

تزيل أدوات التجميع (Rollup وesbuild وVite) الصادرات غير المستخدمة. فإذا استوردتم { formatDate } فقط، أزالت أداة التجميع كل ما عداه من الحزمة. تتيح الصادرات المسمّاة إجراء tree shaking، بينما قد يمنعه import * as utils.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

الاستيراد الديناميكي import() — التحميل الكسول

يعيد import() الديناميكي كائن Promise. ولا تُجلب الوحدة إلا عند تنفيذ الشيفرة. وتقسّم أدوات التجميع هذه الوحدات تلقائيًا إلى أجزاء منفصلة.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

الاستيراد الديناميكي مع معالجة الأخطاء

غلّفوا عمليات الاستيراد الديناميكية داخل try/catch لمعالجة أعطال الشبكة أو الوحدات المفقودة بسلاسة.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

يحتوي import.meta على بيانات وصفية عن الوحدة الحالية. وتشمل الخصائص الأساسية: import.meta.url (عنوان URL مطلق)، وimport.meta.env (متغيرات بيئة Vite)، وimport.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

تنفيذ الوحدة — مرة واحدة

يُقيَّم كلٌّ من وحدات ES مرة واحدة بغض النظر عن عدد مرات استيراده. وتشترك جميع عمليات استيراد الوحدة نفسها في النسخة ذاتها. وهذا يجعل الوحدات مناسبة جدًا للنماذج الأحادية (مثل مخازن البيانات وناقلات الأحداث).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

التبعيات الدائرية

يمكن لوحدتين استيراد كل منهما الأخرى. يتعامل JavaScript مع ذلك، لكن قد تكون القيم غير معرّفة عند أول استخدام بسبب ترتيب التقييم. أعيدوا هيكلة الشيفرة لتجنب الدورات في معظم الحالات.

عمليات الاستيراد للأنواع فقط في TypeScript

استخدموا import type { ... } لاستيراد الأنواع فقط. تُحذف هذه العمليات وقت التجميع ولا تظهر مطلقًا في حزمة الإخراج. استخدموها لتجنب التبعيات الدائرية الناتجة عن المراجع الخاصة بالأنواع فقط.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

إعادة التصدير وملفات Barrel

يعيد ملف Barrel التصدير من عدة وحدات، مما ينشئ نقطة استيراد واحدة ومريحة. انتبهوا عند استخدام ملفات Barrel في التطبيقات الكبيرة — فقد تعيق tree shaking.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

‏type=module في script داخل المتصفح

أضيفوا type="module" إلى وسم script لتمكين صياغة وحدات ES مباشرةً في المتصفح — من دون bundler. وتُؤجَّل الوحدات افتراضيًا، كما أن لكل منها نطاقها الخاص.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

قابلية التشغيل البيني بين CommonJS وESM

يدعم Node.js كليهما. تستخدم ملفات ESM الامتداد .mjs أو تضبط "type": "module" في package.json. وعند استهلاك حزم CommonJS من ESM، تكون الصادرات الافتراضية هي قيمة module.exports. وتتولى أدوات التجميع التعامل مع ذلك بشفافية.

تحقق سريع

ما الفائدة الأساسية من استخدام الصادرات المسمّاة بدلًا من كائن تصدير افتراضي واحد، من ناحية الأداء؟

مراجعة: تعمّق في وحدات ES

تُنفَّذ الوحدات مرة واحدة، وتشترك جميع الجهات المستوردة في النسخة ذاتها. يزيل tree shaking الصادرات المسمّاة غير المستخدمة. ويتيح import() الديناميكي التحميل الكسول وتقسيم الشيفرة. ويوفر import.meta سياق الوحدة. وتوفر ملفات Barrel الراحة، لكنها قد تضر tree shaking. ولا تنتج عمليات الاستيراد للأنواع فقط في TypeScript أي مخرجات.

الأسئلة الشائعة

هل درس «وحدات ES: import وexport وdynamic import» مجاني؟

نعم — نص درس «وحدات ES: import وexport وdynamic import» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «وحدات ES: import وexport وdynamic import»؟

استخدم عمليات التصدير المسمّاة والافتراضية، واستيرادات مساحات الأسماء، وحمّل الشيفرة عند الطلب باستخدام dynamic import() لتحسين الأداء. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «وحدات ES: import وexport وdynamic import»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

وحدات ES: import وexport وdynamic import
npm وpackage.json: الاعتماديات والبرامج النصية
Vite: خادم التطوير والبناء
مفاهيم التجميع: tree shaking وتقسيم الشيفرة

← العودة إلى Frontend Academy