מודולי ESM: ייבוא / ייצוא

כאשר תוכנית גדלה, שמירת הכל בקובץ בודד הופכת למסורבלת. JavaScript מודרני פותר את הבעיה עם מודולי ES (ESM): כל קובץ הוא מודול שיכול לייצא פונקציות, קבועים, מחלקות וקבצים אחרים יכולים לייבא אותם.

export

אתה מייצא את מה שאתה רוצה לפרסם. שתי צורות:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

או בסוף הקובץ:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

מקובץ אחר:

// app.js
import { somma, PI } from './somma.js';

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

האובייקט { somma, PI } הוא רשימת השמות שברצונך לייבא. הם חייבים להתאים את שמות מיוצאים.

ייצוא ברירת מחדל

לכל מודול יכול להיות ייצוא אחד "ראשי", ללא שם:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

אתה מייבא אותו על ידי בחירת השם באופן מקומי:

import log from './log.js';
log('ciao');

שינוי שם

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

"מרחב שמות" אחד לכל קובץ

מודולים מבודדים: משתנה המוצהר בקובץ אינו מגיע להיקף הגלובלי. אתה צריך לייצא אותו במפורש כדי שיהיה גלוי למקום אחר. זהו שיפור עצום לעומת JS מהדור הישן שבו כל <script> שיתף את window.

נסה את זה

בתרגילים למטה לא תכתוב תחביר import/export אמיתי - ארגז החול הוא יחיד קובץ. במקום זאת, נבקש ממך לארגן את הקוד ל-פונקציות קטנות נפרדות שתף פעולה, כפי שהיית עושה אילו כל אחד היה בקובץ אחר.

סקירת התרגיל