ES Modules nədir? Niyə istifadə edim?

Bildiyiniz kimi JavaScriptin web development həyatımızda artıq rolu böyükdür. Tək browser tərfdə deyil, Node JS ilə birlikdə server tərəfində də, aktiv istifadə edirik.

Əvvəllər proyektlər böyüdükcə JS kodlarını idarə etmək bir o qədər çətinləşirdi. Bunun üçün JS kodlarını proyektimizdə təkrar-təkrar istifadə etmək üçün modul formasından ayrılıb yeni formaya keçid edildi. İlk yarandığı vaxtdan bu yana Node JS tərəfində require() metodundan istifadə edilir. Veb tərəfdə isə CommonJS və AMD əsaslı RequireJS adlı yükləyici alətlər yaradıldı. Son vaxtlar Webpack və Babel JS tərəfdə istifadə aktivliyi artmaqda davam edir.

2015-ci ilə qədər veb tərəfində JavaScript üçün standart modul sistemi mövcud deyildi. EcmaScript 2015 ilə ES modullar rəsmi olaraq dilin özünə əlavə edildi və istifadə olunmağa başlandı.

Bəs ES Modules nədir?

ES Modules, JavaScript üçün import və export mexanizması təqdim edir. Bu mexanizmayla, bir faylda yazdığınız kodu export edib, başqa bir fayla import edərək istifadə etmək mümkündür. ES modules əsas hədəfi browserlər olsa da 2020-ci ildən NodeJS dəstəyi ilə server tərəfdə də, istifadə edilməyə başlanmışdır.

ES Modules nümunləri

Aşağıda təqdim etdiyim nümunədə gördüyünüz kimi dəyişkənlər və funksiyalar bir və ya birdən çox export mexanizmasından ibarətdir.

// utils.js  
// Named export 
export function Named() {   
    return 'Hello named export!'; 
} 
// Dəyişkənlər üçün named export 
export const name = 'Hello World';  
// Default export 
export default function testDefault() {   
     return "Hello default export!"; 
}  
// Hər funksiya üçün ayrı-ayrı export istifadə etmədən belə,  
// cəmi bir dəfə export edilə bilər 
export { helloNamed, name, helloDefault };

Bəs bunu necə istifadə edim? deyə bilərsiniz. Səbrli olun başladıq 😉

Named export istifadə qaydası

// example.js
// Named export import qaydası
import { name, Named } from "./util.js";
// Dəyişkən
const testVar = name;
// Funksiya
Named();

Default export istifadə qaydası

// example.js
// Default export istifadə qaydası
import testDefault from "./util.js";
// Default export başqa başqa adla da istifadə edilə bilər
import myFunction from "./util.js";
// Hər ikisi eyni nəticəni verəcək
testDefault();
myFunction();