0Pricing
Frontend Academy · درس

الوحدات: import وexport

قسّم الشيفرة إلى وحدات ES باستخدام عمليات التصدير المسمّاة والافتراضية، واستورد ما تحتاج إليه انتقائيًا، وافهم كيفية حلّ مجمّعات الوحدات لرسم الاعتماديات.

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

لماذا نستخدم الوحدات؟

قبل ظهور الوحدات، كانت جميع أكواد JavaScript تعمل في النطاق العام. وكانت المتغيرات تتعارض، وكان ترتيب الكود مهمًا، وكان يجب تحميل الملفات بالتسلسل. تمنح ES Modules كل ملف نطاقه الخاص، واستيرادات صريحة، وتصديرات قابلة لإزالة ما لا يُستخدم منها.

التصديرات المسماة

صدّر قيمًا محددة باستخدام الكلمة المفتاحية export. ويمكن أن يحتوي الملف على عدة تصديرات مسماة. ويستورد المستخدمون ما يحتاجون إليه تحديدًا.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

الاستيرادات المسماة

استورد التصديرات المسماة باستخدام الأقواس المعقوفة. ويمكنك استيراد عدة تصديرات من وحدة واحدة في عبارة واحدة.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

التصديرات الافتراضية

يمكن أن تحتوي كل وحدة على تصدير افتراضي واحد، وهو عادةً العنصر الرئيسي الذي توفره الوحدة. استورده دون أقواس معقوفة، وامنحه أي اسم.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

إعادة التصدير

يمكن للوحدة إعادة التصدير من وحدات أخرى لإنشاء ملف تجميعي، أي نقطة دخول واحدة تعيد تصدير عناصر متعددة.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

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

استيرادات مساحة الأسماء

استورد كل شيء من وحدة إلى كائن مساحة أسماء باستخدام import * as name. يفيد ذلك عندما تحتاج إلى العديد من التصديرات أو تريد توضيح مصدرها.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

الاستيرادات ذات الآثار الجانبية فقط

تُستورد بعض الوحدات لأجل آثارها الجانبية فقط، مثل polyfills وتسجيل معالجات الأحداث. استوردها دون ربطها باسم.

import './polyfills.js'; // runs the code, imports nothing

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

تعيد الدالة import() الديناميكية وعدًا. استخدمها لتحميل وحدة عند الحاجة فقط، وبشكل كسول. تنشئ أدوات التجميع تلقائيًا جزءًا منفصلًا للوحدات المستوردة ديناميكيًا.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta كائن خاص متاح داخل الوحدات. ويمثل import.meta.url عنوان URL الخاص بالوحدة. ويستخدم Vite القيمة import.meta.env لمتغيرات البيئة.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

حل الوحدات

تحل أدوات التجميع مثل Vite الوحدات من نظام الملفات (المسارات النسبية مثل './utils')، أو من node_modules ('lodash')، أو من الأسماء المستعارة للمسارات ('@/components' المُهيّأة في vite.config.js).

CommonJS مقابل ES Modules

استخدم Node.js في الأصل CommonJS (require / module.exports). ويستخدم المتصفح ES Modules (import / export). كما يدعم Node.js الحديث ES Modules باستخدام type: "module" في package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

تحقق سريع

ما الميزة الرئيسية لاستخدام dynamic import() بدلًا من استيراد ثابت؟

مراجعة: ES Modules

تُستخدم التصديرات والاستيرادات المسماة للقيم المتعددة. ويُستخدم التصدير والاستيراد الافتراضيان للعنصر الرئيسي. وتنشئ إعادة التصديرات ملفات تجميعية. ويتيح import() الديناميكي التحميل الكسول وتقسيم الكود. وتوفر import.meta بيانات وصفية عن الوحدة. وتحل أدوات التجميع الأسماء المستعارة وnode_modules والمسارات النسبية.

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

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

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

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

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

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

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

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

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

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

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

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

  1. أساليب المصفوفات: map وfilter وreduce وfind
  2. تفكيك الكائنات وعامل الانتشار
  3. القوالب النصية والسلسلة الاختيارية
  4. الوحدات: import وexport
← العودة إلى Frontend Academy