Înțelegeți diferitele formate de module javascript

BY admin
|

Când vine vorba de construirea aplicației dvs., dacă sunteți ca mine, vă întrebați întotdeauna: ce format ar trebui să folosesc? CJS ? AMD ? UMD ? ESM ? Care sunt diferențele ? De ce atât de multe formate ?

Prin intermediul acestui articol, voi încerca să răspund la aceste întrebări 😊.

#Diferitele formate

#CommonJS (CJS)

Este unul dintre primele formate create. Sunt aproape sigur că l-ați folosit deja. Este sistemul de module care a inspirat inițial NodeJS.

Acest sistem se bazează pe importul și exportul de module datorită unor cuvinte cheie bine cunoscute: require și exports. Obiectul module.exports este într-adevăr specific pentru NodeJS.

 // utils.js // we create a function function add(r){ return r + r; } // export (expose) add to other modules exports.add = add; // index.js var utils = require('./utils.js'); utils.add(4); // = 8

Echipa commonJS a creat acest API ca fiind unul sincron, ceea ce nu este atât de bun pentru browsere… Mai mult, CommonJS nu este înțeles nativ de browsere; necesită fie o bibliotecă de încărcare, fie o anumită transpunere.

#Asynchronous Module Definition (AMD)

AMD este un fel de divizare a CommonJS. A fost creată de membri ai echipei CJS care nu au fost de acord cu direcția luată de restul echipei.

Acestia au decis să creeze AMD pentru a suporta încărcarea asincronă a modulelor. Acesta este sistemul de module folosit de RequireJS și care funcționează client-side (în browsere).

 // add.js define(function() { return add = function(r) { return r + r; } }); // index.js define(function(require) { require('./add'); add(4); // = 8 }

Acest exemplu funcționează numai dacă aveți requirejs pe site-ul dumneavoastră. Puteți găsi și alte exemple AMD.

#Universal Module Definition (UMD)

După cum probabil ați înțeles aceste 2 formate sunt, din păcate, ininteligibile între ele. Acesta este motivul pentru care a fost creat UMD-ul. Acesta se bazează pe AMD, dar cu unele cazuri speciale incluse pentru a gestiona compatibilitatea CommonJS.

Din păcate, această compatibilitate adaugă o anumită complexitate care complică citirea / scrierea. Dacă doriți, puteți găsi mai multe șabloane de cod UMD pe acest depozit github.

#ES2015 Modules (ESM)

Pentru că aceste 3 formate nu sunt atât de ușor de citit, sunt greu de analizat pentru analizatorul de cod static și nu sunt acceptate peste tot, echipa ECMA (echipa care se ocupă de standardizarea Javascript) a decis să creeze standardul ECMAScript 2015 (cunoscut și ca ES6).Acest format este foarte simplu de citit și de scris și suportă atât modurile de funcționare sincronă, cât și asincronă.

 // add.js export function add(r) { return r + r; } // index.js import add from "./add"; add(4); // = 8

Mai mult, modulele es pot fi analizate static, ceea ce permite uneltelor de compilare (cum ar fi Webpack sau Rollup) să efectueze tree-shaking pe cod. Tree-shaking este un proces care elimină codul nefolosit din pachete.

Din păcate, acest format are încă 2 dezavantaje (dar se îmbunătățesc):

  • ESM nu suportă modulele importate dinamic, dar există o propunere de câteva luni care a început să fie implementată pe unele browsere.
  • Nu este suportat pe toate browserele dar, din fericire, acest lucru poate fi „rezolvat” datorită… transpilingului !

#Transpiling

Transpilingul este procesul de traducere a unei limbi sau a unei versiuni a unei limbi în alta. Deci, aici, ideea este de a transpila ES6 în ES5 pentru a obține un suport mai bun pentru browsere. din păcate, această transpilare are un cost, deoarece adaugă niște cod suplimentar pentru a corecta caracteristicile lipsă din ES6 care nu există în ES5.

Cel mai faimos transpiler care este folosit de obicei în acest caz este Babel.

#Lecturi suplimentare

Dacă doriți să mergeți mai departe (prin exemple, explicații, etc.) pentru a înțelege cum funcționează aceste formate diferite, iată câteva lecturi pe care le-am găsit și care m-au inspirat:

  • JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015
  • You Should be Using esm
  • Writing Modular JavaScript With AMD, CommonJS & ES Harmony
  • Ce este AMD, CommonJS și UMD?
  • Tehnici de modularizare (există mai multe pagini aici)
  • The state of JavaScript modules

.