Τι είναι τα ES modules;

Τα ES modules είναι ο τυπικός τρόπος οργάνωσης κώδικα σε JavaScript, βασισμένος στη σύνταξη import και export.

Κύρια χαρακτηριστικά:

• Πρότυπο: Μέρος της προδιαγραφής ECMAScript, υποστηριζόμενο από τις περισσότερες σύγχρονες περιηγητές και περιβάλλοντα εκτέλεσης όπως το Node.js.
• Explicit dependency management: Τα modules δηλώνουν σαφώς ποιες τιμές εξάγουν και ποιες εισάγουν από άλλα modules.
• Static structure: Οι εξαρτήσεις των modules καθορίζονται κατά τη φάση της μεταγλώττισης (ή ανάλυσης), όχι κατά την εκτέλεση. Αυτό επιτρέπει στα εργαλεία στατικής ανάλυσης, όπως οι bundlers (Webpack, Rollup), να βελτιστοποιήσουν τον κώδικα.
• Isolation: Κάθε μεταβλητή, συνάρτηση ή κλάση που δηλώνεται μέσα σε ένα module είναι, από προεπιλογή, τοπική σε αυτό το module. Για να είναι προσβάσιμα από έξω, πρέπει να εξάγονται ρητά.
• Support for asynchrony: Τα modules μπορούν να φορτωθούν ασύγχρονα στους περιηγητές, χωρίς να μπλοκάρουν το φόρτωμα της σελίδας.

Σύνταξη:

• Export:

  // app.js
  export const myVariable = 123; // Ονομαστική εξαγωγή
  export function myFunction() { // Ονομαστική εξαγωγή
    console.log('Γειά από το module!');
  }
  export default class MyClass { // Προεπιλεγμένη εξαγωγή
    constructor() {
      console.log('Δημιουργήθηκε instance του MyClass');
    }
  }
  

• Import:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Ονομαστική εισαγωγή
  import MyDefaultClass from './app.js'; // Προεπιλεγμένη εισαγωγή
  
  console.log(myVariable); // 123
  myFunction(); // Γειά από το module!
  const instance = new MyDefaultClass(); // Instance του MyClass δημιουργήθηκε
  

Σύγκριση με CommonJS (Node.js):

Χαρακτηριστικό	ES modules	CommonJS
Σύνταξη	import, export	require, module.exports, exports
Εξαρτήσεις	Στατικές (προσδιορίζονται πριν την εκτέλεση)	Δυναμικές (προσδιορίζονται κατά την εκτέλεση)
Φόρτωση	Ασύγχρονη (στον περιηγητή)	Συγχρονική
this στο ρίζα	undefined	module.exports
Υποστήριξη	Περιηγητές, Node.js (από την έκδοση 13.2 και μετά, με το flag --experimental-modules)	Κυρίως Node.js

Η χρήση των ES modules είναι η προτεινόμενη προσέγγιση για σύγχρονη ανάπτυξη frontend λόγω της τυποποίησής τους, της καλύτερης υποστήριξης από τα εργαλεία και της δυνατότητας στατικής ανάλυσης.