Tuesday, February 06, 2024

Ključne razlike u organizaciji koda, CommonJS i ES6 formati modula u Node.js

Za svakog početnika koji počinje sa učenjem i korišćenjem Node.js platforme, bez obzira na kom su nivou poznavanja JavaScript-a; može biti jako zbunjujuće da Node.js koristi i CommonJS i ES6 formate modula. Još kad vas pitaju, šta je sa ES7 specifikacijom skriptnog jezika, mislim da je to prva stvar koju treba objasniti. CommonJS je pre svega nastao kao projekat za standardizaciju ekosistema modula za JavaScript programski jezik izvan veb pretraživača. CommonJS-ova specifikacija o tome kako moduli treba da rade se danas široko koristi za JavaScript programski jezik na strani servera sa Node.js platformom, ali takođe se koristi za JavaScript programski jezik na strani veb pretraživača. Međutim, taj kôd mora biti upakovan sa transpilerom pošto pretraživači ne podržavaju CommonJS. Znači, CommonJS je stariji standard koji se koristi u Node.js platformi za format modula i sad se tretira kao default. Većina ugrađeni modula je kreirano u CommonJS format modula. Dolaskom, ECMAScript 2015 ili skraćeno ES6 format modula je postalo veliko poboljšanje za ceo svet JavaScript programskog jezika, tako i novijih verzija Node.js platforme. Danas, Node.js podržava i CommonJS i ES6 formate modula i bez obzira što su oba modul formata konceptualno slični, oni se praktično na različite načine itekako razlikuju. Što se tiče novijeg ES7 formata modula u Node.js platformi, tako nešto ne postoji jer ES7 nije doneo ništa novo po pitanju formata modula, već se ES7 uglavnom fokusira na druge programsko jezičke karakteristike. Šta će se menjati u budućnosti, za sada možemo samo da pretpostavljamo; ali do tada trenutna podrška za Node.js platformu se isključivo oslanja na CommonJS i ES6 formate modula. ES6 format modula postaje sve popularniji i bolji izbor za novije projekte, naročito u novijim Node.js verzijama, ali se CommonJS definitivno koristi.


( ES6 format modula je namenjen svim JavaScript okruženjima )

Što se tiče razlike između CommonJS i ES6 formata modula u Node.js, prva razlika je u tome što CommonJS moduli moraju biti učitani iz spremišta modula, kao što je npm. Drugo, CommonJS modulima se može pristupiti samo iz konteksta Node.js aplikacije. CommonJS moduli nemaju eksporte ili prototipove kao što to imaju ES6 moduli. Konačno, funkcija require u CommonJS-u nije ekvivalentna funkciji import u ES6 modulima. Glavna razlika između CommonJS i ES6 modula je struktura foldera. Sa CommonJS, sve zavisnosti za projekat su pohranjene u jednom folderu koji se zove node_modules. Sa ES6 modulima, svaka zavisnost je pohranjena u svojim datotekama. Ovo omogućava programerima da bolje kontrolišu kako se koriste njihove zavisnosti i olakšava verziju softvera. Ali isto tako trebate znati da CommonJS je sistem modula inspirisan Microsoft-ovim AMD API-jem. Omogućava da se moduli pišu na sličan način kao AMD moduli, sa glavnom razlikom što se CommonJS moduli mogu učitati u bilo koje okruženje Node.js. ES6 moduli su novi sistem modula koji je razvila Google kompanija koja omogućava veću modularnost i ponovnu upotrebu u različitim programskim jezicima. Prednost korišćenja ES6 modula je u tome što se oni mogu prevesti u izvorni kôd što ih čini bržim i efikasnijim od CommonJS modula. Međutim, ono što je najbitnije za svakog početnika po pitanju Node.js platforme jeste jednostavno da CommonJS podržava dinamičko učitavanje modula, što znači da možeš uvoziti module tokom izvršavanja programa. Učitavanje modula u CommonJS je sinhrono, što znači da se izvršava blokirajuće. Ovo može dovesti do problema u performansama u nekim situacijama. Promenjive definisane unutar modula su privatne i nevidljive izvan modula, čime se postiže lokalni opseg. Međutim, ES6 predstavlja značajno ažuriranje 
JavaScript programskog jezika, donoseći brojne nove funkcionalnosti i poboljšanja. Tu izdvajamo arrow funkcije koje pružaju kraći i čitljiviji način za definisanje funkcija, a takođe održavaju vrednost this unutar funkcije na vrednosti koja je bila aktuelna kada je funkcija definisana. ES6 omogućava destrukturiranje objekata i nizova kako bi se jednostavno izvlačili podaci, ali i takođe uvodi promises za bolje rukovanje asinhronim operacijama, umesto korišćenja callback funkcija. I ovako bi mogli nabrajati do sutra. Zato je najbolje da razlike prepoznate kroz praksu i korišćenje oba formata modula u Node.js.

Kako da promenimo modul koji je kodiran u CommonJS u ES6 format modula?

Ovo pitanje nije samo odlično, već vam u startu nagoveštava da u nekim slučajevima promenom
ekstenzije fajla i malo sintakse je moguće preći iz jednog modula formata u drugi. Definitivno, ovakvom praksom će te uočiti razliku. Vratite se u prethodnu lekciju 2 i pogledajte kako smo kreirali CommonJS format modula, pogledajte ovde. Da ne bi ste ponovo pisali isti kôd; kad pokrenete projekat u Visual Studio Code-u; jednostavno kopirajte direktorijum lesson2 u isti glavni direktorijum node_js_tutorial i preimenujte ga u lesson3. Zatim preimenujte sledeće fajlove i njihove ekstenzije; lesson2.js u lesson3.mjs i app.js u app.mjs. Sad vam ostaje samo da promenite  malo  JavaScript programski kôd. Otvorite fajl lesson3.mjs i promenite sledeće.

// a variable for the internal use

// var count = 0;

 

let count = 0;

 

// a function which use the variable for the internal use

// const next = function() { return ++count; };

 

const next = () => ++count;

 

// a constant for the external use

const PI = 3.14;

 

// a function for the external use

const sum = (num1, num2) => num1 + num2;

 

// a class for the external use

class Student {

    // constructor

    constructor(fname, lname, subject) {

        this.fname = fname;

        this.lname = lname;

        this.subject = subject;

    }

 

    // method

    introduction() {

        console.log(`Hello! My name's ${this.fname} ${this.lname}, and I study ${this.subject}.`);

 

    }

   

}

 

/*

module.exports.next = next;

module.exports.PI = PI;

module.exports.sum = sum;

module.exports.Student = Student;

*/

 

// module.exports = { sum:sum, PI:PI, Student:Student, next:next }

 

export default { sum, PI, Student, next };

Kao što možete prvo videti iz navedenog JavaScript programskog kôda, ES6 format modula umesto var koristi ključnu reč let za deklarisanje promenjivih poput count u ovom slučaju. Arrow funkcije pružaju kraći i čitljiviji način za definisanje funkcija, tako da i funkciju next() u ovom slučaju možemo skratiti. I na kraju fajla umesto strukture module.exports koristimo export default; ali isto tako i template stringovi omogućavaju lako uključivanje promenljivih u string literal, čime se poboljšava čitljivost i izbegava potreba za konkatenacijom stringova. Otvorite fajl app.mjs, i promenite sledeće: 

// const lesson2 = require('./lesson2');

 

// Importing the module

import lesson3 from './lesson3.mjs';

 

console.log(lesson3);

 

// Creating an instance of thr Student class

const person1 = new lesson3.Student('Manuel', 'Radovanovic', 'Computer Science');

 

// Logging the instance

console.log(person1);

 

// Calling the introduction method

console.log(person1.introduction());

 

// Logging the values from the module

console.log(lesson3.PI);

console.log(lesson3.sum(5,10));

 

// Calling the next function from the module

console.log(lesson3.next());

console.log(lesson3.next());

console.log(lesson3.next()); 

Kad pričamo o ES6 modul formatu onda definitivno mislimo na učitavanje modula pomoću funkcije import umesto require koje koristi CommonJS modul formata. Sve ostalo će isto funkcionisati, s time da smo ovom jednostavnom JavaScript programskom kôdu dodelili komentare da bi vam stvari bile jasnije. Sad jednostavno otkucajte sledeću komandu u terminal panelu.

manuel@manuel-virtual-machine:~/nodejs_tutorial$ node lesson3/app.mjs

Dobićete sledeći rezultat.

{

  sum: [Function: sum],

  PI: 3.14,

  Student: [class Student],

  next: [Function: next]

}

Student {

  fname: 'Manuel',

  lname: 'Radovanovic',

  subject: 'Computer Science'

}

Hello! My name's Manuel Radovanovic, and I study Computer Science.

undefined

3.14

15

1

2

3

Kako smo sve ovo odradili i kako sve ovo izgleda, možete pogledati i u video-u:


( Node.js - 2. How to Change CommonJS in ES6 Format Module? )

  

 

 

  

 

 

 

No comments:

Post a Comment