مختصر كتابي: JavaScript Modules: Import and Export

كيف تنتقل قيمة من ملف إلى ملف آخر دون نسخها؟

لديك قائمة وجبات، ولا تريد أن تضع نسخة منها في كل ملف. هنا يأتي دور الوحدة (Module): ملف يُصدّر أشياء، ويستورد أشياء من ملفات أخرى. الفكرة تشبه مطبخًا يُخرج وجبة جاهزة؛ من يأخذها لا يحتاج إلى نسخ المطبخ كله.

في ملف data.js ثابت اسمه meals، وهو مصفوفة فيها كائن واحد، وحقل name فيه قيمته فول. كلمة export قبل التعريف تعني أن الملفات الأخرى مسموح لها أن تطلب هذا الاسم. في App.js يجلب الاستيراد الأول React، ويجلب الثاني meals من ملفنا. داخل الفقرة نقرأ العنصر الذي ترتيبه صفر ثم حقل name، فيظهر فول لا اسم المتغير.

// data.js
export const meals = [{ id: "m1", name: "فول", calories: 250 }];
export const courseName = "يومي";

// App.js
import React from "react";
import { meals, courseName } from "./data";
export default function App() {
  return (
    <main dir="rtl">
      <h1>{courseName}</h1>
      <p>{meals[0].name}</p>
    </main>
  );
}

إذا كتبت عدس مكان فول في ملف البيانات ثم شغّلت الكود، يتغير النص مع أنك لم تلمس الفقرة. هذا يعني أن الاستيراد يربط الاستخدام بمصدر القيمة، وليس نسخة من كلام كتبته في App.

كلمة export قبل المتغير تعني التصدير بالاسم (Named Export)، ولذلك نستورد meals بين أقواس معقوفة وبالاسم نفسه. أما export default في App فمختلف: المستورد يختار اسمًا محليًا واحدًا، ولا يحتاج إلى أقواس. وهذا فرق في الصيغة، لا في جودة الكود.

فرّق بين اسم المتغير وقيمته: courseName اسم داخل البرنامج، ويومي هي القيمة التي يراها المستخدم. تغيير القيمة لا يحتاج إلى تغيير الاستيراد، أما تغيير اسم التصدير فيلزمه تغيير الاستيراد الذي يطلبه. إذا ظهر خطأ يقول إن الاسم غير مُصدَّر فارجع إلى سطري التصدير والاستيراد؛ تعديل JSX لن يصلح مشكلة حدثت قبل أن يعمل App أصلًا.

• المسار الذي يبدأ بنقطة مثل ./data يعني ملفًا من مشروعنا، والنقطتان ../ تعنيان المجلد الأب.
• الاسم دون نقطة مثل react هو اسم حزمة (Package).
• حالة الحروف يجب أن تتطابق تمامًا؛ الاختلاف قد يعمل على جهاز ويتعطل على جهاز آخر.
• تحمّل JavaScript كل وحدة مرة واحدة في بيئة التشغيل، لكن مشاركة متغير يتغير بين الملفات ليست بديلًا عن إدارة الحالة.
• إذا كان الاسم المستورد غير موجود ظهر الخطأ قبل ظهور الصفحة؛ راجع الاسم والمسار وحالة الحروف.

جرّب في المحرر تحت الدرس: صدّر courseName من data.js بقيمة يومي، واستورده بالاسم، واعرضه عنوانًا فوق الوجبة.

الخلاصة: التصدير يحدد ما يقدمه الملف، والاستيراد يطلبه بالاسم والمسار الصحيحين، فتتغير القيمة في مصدرها وحده وتظهر حيث تُستخدم.