Ymmärrä eri javascript-moduulien formaatit

BY admin
|

Kun rakennat sovellusta, kysyt aina itseltäsi, mitä formaattia minun pitäisi käyttää? CJS ? AMD ? UMD ? ESM ? Mitkä ovat erot ? Miksi niin monia formaatteja?

Tässä artikkelissa yritän vastata näihin kysymyksiin 😊.

#Erilaiset formaatit

#CommonJS (CJS)

Tämä on yksi ensimmäisistä luoduista formaateista. Olen melko varma, että olet jo käyttänyt sitä. Se on moduulijärjestelmä, joka alun perin inspiroi NodeJS:ää.

Tämä järjestelmä perustuu moduulien tuontiin ja vientiin joidenkin tunnettujen avainsanojen ansiosta: require ja exports. module.exports-objekti on todella spesifinen NodeJS:lle.

 // 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

CommunJS-tiimi loi tämän API:n synkroniseksi, mikä ei ole kovin hyvä selaimille… Lisäksi Commonjs ei ole natiivisti selaimien ymmärtämä; se vaatii joko latauskirjaston tai jonkinlaista transpilointia.

#Asynkronous Module Definition (AMD)

AMD on jonkinlainen CommonJS:n jako. Sen ovat luoneet CJS-tiimin jäsenet, jotka olivat eri mieltä muun tiimin ottamasta suunnasta.

He ovat päättäneet luoda AMD:n tukemaan asynkronista moduulilatausta. Tämä on RequireJS:n käyttämä moduulijärjestelmä, joka toimii asiakaspuolella (selaimissa).

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

Tämä esimerkki toimii vain, jos sivustollasi on requirejs. Löydät muitakin AMD:n esimerkkejä.

#Universal Module Definition (UMD)

Kuten olet ehkä ymmärtänytkin, nuo kaksi formaattia ovat valitettavasti toisilleen käsittämättömiä. Tämän vuoksi UMD on luotu. Se perustuu AMD:hen, mutta siihen on sisällytetty joitain erikoistapauksia CommonJS-yhteensopivuuden hoitamiseksi.

Valitettavasti tämä yhteensopivuus lisää jonkin verran monimutkaisuutta, joka tekee lukemisesta / kirjoittamisesta monimutkaista. Jos haluat, voit löytää useita malleja UMD-koodista tästä github-arkistosta.

#ES2015 Modules (ESM)

Koska näitä kolmea formaattia ei ole helppo lukea, niitä on vaikea analysoida staattisella koodianalysaattorilla eikä niitä tueta kaikkialla, ECMA-tiimi (Javascriptin standardoinnin takana oleva tiimi) päätti luoda ECMAScript 2015 (tunnetaan myös nimellä ES6) -standardin.Tämä formaatti on todella yksinkertainen lukea ja kirjoittaa, ja se tukee sekä synkronisia että asynkronisia toimintatapoja.

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

Lisäksi es-moduulit voidaan analysoida staattisesti, mikä mahdollistaa build-työkalujen (kuten Webpackin tai Rollupin) suorittaman koodin puun ravistelun. Tree-shaking on prosessi, joka poistaa käyttämätöntä koodia bundleista.

Tässä formaatissa on valitettavasti vielä 2 huonoa puolta (mutta ne paranevat):

  • ESM ei tue dynaamisesti tuotuja moduuleja, mutta jo kuukausia on ollut ehdotus, jota on alettu toteuttaa joissakin selaimissa.
  • Se ei ole tuettu kaikissa selaimissa, mutta onneksi tämä voidaan ”korjata” kiitos… transpiloinnin !

#Transpilointi

Transpilointi on prosessi, jossa yksi kieli tai kieliversio käännetään toiseen. Tässä tapauksessa tarkoituksena on siis transpiloida ES6 ES5:een paremman selaintuen saamiseksi. valitettavasti tällä transpiloinnilla on hintansa, sillä se lisää ylimääräistä koodia ES6:n puuttuvien ominaisuuksien paikkaamiseksi, joita ei ole ES5:ssä.

Tunnetuin transpiloija, jota yleensä käytetään tässä tapauksessa, on Babel.

#Lisälukemista

Jos haluat mennä pidemmälle (esimerkkien, selitysten jne. kautta) ymmärtämään, miten nuo eri formaatit toimivat, tässä on joitain löytämiäni ja minua inspiroivia lukuja:

  • JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015
  • Sinun pitäisi käyttää esm:ää
  • Writing Modular JavaScript With AMD, CommonJS & ES Harmony
  • Mitä on AMD, CommonJS ja UMD?
  • Modularisointitekniikoita (tässä on useita sivuja)
  • Javskriptin moduulien tila