ES Modules-ը բրաուզերում (type="module", defer, nomodule)

Երբ ES Modules-ը նոր մտավ JavaScript աշխարհ, այն նաև ստացավ բնական աջակցություն բրաուզերների կողմից։ Դրանով բրաուզերում կարողացանք օգտագործել import և export առանց որևէ Bundler-ի (օրինակ՝ Webpack)։ Այս հոդվածում կտեսնենք՝ ինչպես է աշխատում ES Modules-ը բրաուզերում և ինչ դեր ունեն type="module", defer և nomodule ատրիբուտները։

---

type="module"

Սովորական <script> թեգը բրաուզերում կատարվում է անմիջապես, բայց եթե ցանկանում ես օգտագործել import/export բառերը, ապա պետք է script թեգին ավելացնել type="module":

  
<script type="module" src="main.js"></script>
  

Կարևոր կետեր՝

• Բոլոր մոդուլ սքրիպտները աշխատում են deferred ռեժիմով՝ այսինքն՝ դրանք բեռնվում և կատարվում են միայն այն բանից հետո, երբ HTML փաստաթուղթը ամբողջությամբ վերբեռնված է։
• Մոդուլ սքրիպտները ունեն սեփական scope, և նրանց մեջ this համարվում է undefined, ոչ թե window:
• Մոդուլ ֆայլերից կարելի է օգտագործել import և export:

---

defer ատրիբուտը և module սքրիպտները

Սովորական <script> թեգերում երբ օգտագործում ենք defer, նշանակում է՝ սքրիպտը պետք է բեռնվի ֆոնի վրա և կատարվի միայն այն բանից հետո, երբ ամբողջ HTML բեռնվի։

Բայց մոդուլային սքրիպտների դեպքում type="module" արդեն դեֆոլտով աշխատում է defer նման ձևով։ Այսինքն՝ պարտադիր չէ առանձին գրել defer ատրիբուտը՝ այն արդեն կիրառվում է։

  
<script type="module" src="main.js"></script>
  

Այս սքրիպտը ավտոմատ կսպասի մինչև HTML-ի ամբողջական բեռնումը, հետո կկատարվի։

---

nomodule ատրիբուտը

Որպեսզի հին բրաուզերներում (որոնք չեն աջակցում ES Modules) fallback տանք սովորական JavaScript ֆայլ, կարող ենք օգտագործել nomodule ատրիբուտը։

  
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>
  

Ինչ է կատարվում այստեղ․

• Եթե բրաուզերը աջակցում է type="module", կբեռնվի modern.js։
• Եթե բրաուզերը չի աջակցում type="module", կբեռնվի legacy.js։

Կարևոր․ nomodule-ը աշխատում է միայն ոչ մոդուլային բրաուզերներում։ Նոր բրաուզերները ամբողջությամբ անտեսում են nomodule-ով սքրիպտները։

---

Օրինակ՝ Module համակարգի օգտագործում բրաուզերում

Եկե՛ք վերցնենք պարզ օրինակ, թե ինչպես կարող ենք մի ֆայլից արտահանել և ներմուծել ֆունկցիա բրաուզերում։

  
// greet.js
export function greet(name) {
  console.log(`Բարև, ${name}!`);
}
  

  
// main.js
import { greet } from './greet.js';

greet('Անի');
  

  
<!-- index.html -->
<script type="module" src="main.js"></script>
  

Երբ բրաուզերը կբեռնի main.js-ը, այն կգտնի greet.js-ը և ճիշտ կարգով կկատարի ֆունկցիաները։

---

Եզրակացություն

ES Modules-ը բրաուզերում թույլ է տալիս մեզ ստեղծել ավելի կազմակերպված, մոդուլային և ժամանակակից վեբ հավելվածներ։ Պետք է հիշել օգտագործել type="module" մոդուլային սքրիպտների համար և nomodule՝ հին բրաուզերների աջակցման նպատակով։ Սա այսօր դարձել է Frontend ծրագրավորման հիմնական ստանդարտը։