Ymmärrä eri javascript-moduulien formaatit
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