Aan de slag met Babel 7

Javascript is uniek vanwege de breedte van het ecosysteem. Terwijl nieuwe normen syntactische suiker toevoegen, neemt ze dat ze worden ondersteund op browsers tijd. Babel werkt rond dit probleem via automatische transpilatie.

Het idee achter het product is eenvoudig: Babel neemt de ES6- of ES7-code in en vervangt nieuwe syntactische elementen met emulatiecode. De uitvoer bevestigt aan de klassieke Javascript-syntaxis en wordt uitgevoerd op oudere browsers zoals Internet Explorer.

Babel's eerste release nam de wereld stormende. Kort nadat het voor het eerst verscheen, hielden verschillende frameworks zoals reageren, VUE en Ember het omarmden. Ontwikkelaars gebruiken het product vaak zonder te weten dat het op de achtergrond werkt - meer dan één populair NPM-project heeft een afhankelijkheid van Babel.

• Hoe maak je een app

Deze afhankelijkheden transformeerden het vrijgaveproces van de voorganger in een aandeel aan conflicten. Versie 7, nog steeds beheerd door een klein onderhoudsteam, probeerde zo zo compatibel mogelijk te zijn. Het breken van veranderingen zijn weinigen en ver tussen, terwijl de kwaliteit van de code generatie hoog blijft (als u met een team werkt, bespaart documenten in cloud opslag zal je helpen samenhangend te blijven).

Als je eerder niet met Babel hebt gewerkt, laat dit dan je gids zijn. Geavanceerde Javascript-functies kunnen gebruiken zonder compatibiliteitsels maakt het leven veel gemakkelijker.

Wilt u sommige tools om uw proces te stroomlijnen? Onze gids voor de beste website bouwer zullen helpen. Wilt u langdurige ondersteuning? Pak het recht web hosting onderhoud.

01. Versiecontrole

Babel woont meestal in de Node Runtime-omgeving. Laten we beginnen met het controleren van de gebruikte versies. De uitvoer biedt de versiestatus die wordt aangetroffen op het werkstation Ubuntu 14.04 dat wordt gebruikt om het volgende artikel te creëren. Dit is geen pedanterie - de figuur die bij deze stap komt, laat zien dat het Babel-team ondersteuning viel voor nogal wat Node.js-versies.

 Tamhan @ Tamhan-ThinkPad: ~ $ Node - Versie
v8.14.0
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --Versie
6.4.1 

02. Verandering van pakketnamen

Eén brekende verandering in versie 7 heeft de Babel-pakketten in hun eigen naamruimte verplaatst. Oudere pakketten werden niet uit de verschillende repositories verwijderd. Dit is belangrijk, omdat het gebruik van legacy-pakketnamen leidt tot de situatie die wordt getoond in de figuur die bij deze stap vergezelt.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Installeer --Save-Dev @ Babel / Core @ Babel / CLI @
BABEL / PRESET-ENV @ BABEL / NODE
​​​
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / Preset-Env @ 7.2.0 

03. Voeg een bouwactie toe

De bovenstaande stap wordt ervan uitgegaan dat u in een NPM-project werkt. In dat geval is het runnen van Babel via de bouwactie eenvoudig. Open pakket en wijzig het zoals aangetoond in de onderstaande code:

 {
​​​
"Hoofd": "index.js",
"Scripts": {
"Test": "echo \" -fout: geen test
opgegeven \ "& amp; & amp; exit 1",
"Build": "Babel-index.js -d lib"

}, 

04. Code Transpile met de hand

Babel aan het werk brengt om het afvuren van de bouwactie. Dit wordt het best voltooid via de opdracht NPM RUN. De -d waarde informeert Babel dat de resultaten moeten worden geplaatst in de lib Folder - De figuur die bij deze stap wordt getoond, laat zien dat de map op de vlucht wordt gemaakt.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
run build
& GT; [email protected] Build / Home / Tamhan /
WorkspaceB7
& GT; BABEL INDEX.JS -D LIB
Samengesteld 1 bestand met Babel. 

05. Een kwestie van configuratie

Het aanroepen van Babel zonder verdere configuratie-opties maakt geen transpilatie mogelijk. Code kan alleen worden getranspileerd als het raamwerk nadere informatie over de doelomgeving ontvangt. Dit kan worden gedaan via een opdrachtregelparameter, of door een bestand te maken dat wordt genoemd .babelrc in de projectwortel.

06. Configureer de BabelRC

Babel configureert zichzelf via een set plug-ins, die elk transpilatie van toepassing zijn op de codebasis. Wij gebruiken de Preset-env Pakket - het wordt geleverd met een vooraf geconfigureerde reeks transformaties die bedoeld zijn om de meeste basen te dekken.

 {
"Presets": ["@ Babel / Preset-Env"]
} 

07. Tijd voor een proefrit

Voeg een beetje javascript toe aan index.js om het programma tegen een live-code te testen. De code die deze stap begeleidt, zou niet werken aan oudere browsers - wanneer gedaan, wordt de impliciete functie vervangen door een normaal Verklaring, zoals getoond in de figuur.

FUNCTIE TAMSTEST () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Pas de targeting aan

Preset-env Brengt standaard van toepassing op de meeste transpilaties: het doel van het product is om universeel compatibele javascript te creëren zonder rekening te houden met bandbreedte en prestatiekosten. U kunt de configuratie wijzigen door door te geven in een doelen Object - Het onderstaande voorbeeld richt zich op specifieke versies van chroom en dwz.

 {
"Presets": [
​
"@ Babel / Preset-Env",
​
"Doelen": {
"Chrome": "58",
"IE": "11"
​
​
​
​
} 

09. Geavanceerde targeting

Babel's browser Targeting is niet beperkt tot Chrome- en Internet Explorer. Dank aan samenwerking met browserlist , ontwikkelaars kunnen mengen en matchen van meer dan een dozijn doelen, zoals hieronder wordt getoond.

Namen zijn Case Ongevoelig:

• Android voor Android Webview.
• Baidu voor Baidu-browser.
• Blackberry of bb Voor BlackBerry-browser.
• Chroom Voor Google Chrome.
• Chromeandroid of and_chr voor chroom voor Android.
• Rand voor Microsoft Edge.
• Elektron voor elektronenkader. Het wordt geconverteerd naar verchroomde versie.
• Ontdekkingsreiziger of d.w.z voor Internet Explorer.
• Exploriet of ie_mob Mobile voor Internet Explorer.
• Firefox of ff voor Mozilla Firefox.
• Firefoxandroid of and_ff voor Firefox voor Android.
• IOS of iOS_SAF voor iOS Safari.
• Knooppunt voor node.js.Opera voor opera.
• Operamini of OP_MINI voor Opera Mini.
• Operamobiel of op_mob voor Opera Mobile.
• Qqandroid of en_qq Voor QQ-browser voor Android.
• Safari voor desktopsafari.
• Samsung voor Samsung Internet.
• Ucandroid of en_uc voor de UC-browser voor Android.

10. Geavanceerde targeting, deel twee

BrowserList kan ook geavanceerde query's nemen. De startpagina Geeft een vermelding van de configuratie-opties, die bijna allemaal in Babel kunnen worden gebruikt door te wijzigen babelrc ​Queries kunnen lokaal worden geëvalueerd als uw werkstation NPX heeft geïnstalleerd.

 {
"Doelen": "& GT; 0,25%, niet dood"
} 

11. Automatische transpilatie

Babel met de hand babbelen wordt snel vervelend. De Nodemon-hulpprogramma controleert bestandssysteembronnen en branden uit opdrachten naarmate wijzigingen worden gedetecteerd. In theorie wordt het toevoegen van Nodemon-ondersteuning afgehandeld via een kleine wijziging in pakket ​

 {
"Naam": "WorkspaceB7",
​​​
"Hoofd": "index.js",
"Scripts":
​
"Start": "Nodemon --exec Babel-Node
Index.js ", 

12. Controleer op aanwezigheid

Sommige werkstations hebben nodemon wereldwijd geïnstalleerd. Als dit niet het geval is, levert het programma een foutmelding op dat lijkt op de hieronder weergegeven. Gelukkig, implementeren nodemon is gemakkelijk bereikt via de NPM-installatie opdracht.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Installeer --Save-Dev Nodemon 

13. Controleer de functionaliteit

Afvuren NPM Start in een terminalvenster en ga verder met het wijzigen van de inhoud van index.js met een editor zoals Gedit of Visual Studio-code ​Na het opslaan, nodemon zal statusinformatie uitvoeren.

 [Nodemon] opnieuw opstarten vanwege veranderingen ...
[NODMON] Start `BABEL-NODE INDEX.JS`
[NODMON] CLEAN EXIT - WACHTEN OP VERANDERINGEN
vóór opnieuw opstarten 

14. Fix-transpilatie

Terwijl nodemon De detectie moet op dit punt perfect werken, de inhoud van de index.js bestand dat inkomt lib niet updaten. Dit wordt veroorzaakt door een nicly van babel-knoop - het plaatst de getilde bestanden niet op de schijf. Het vuurt in plaats daarvan een gewijzigde versie van de knooppunt CLI af, die met de getranspileerde bestanden werkt.

15. Programmatisch transpilecode

Babel is niet beperkt tot het werken aan de opdrachtregel. Als de juiste pakketten zijn geïnstalleerd, kan code ook worden overgebracht van een ander programma. De fragment die deze stap vergezelt, past een reeks basisransformaties toe aan een invoerreeks. Houd er rekening mee dat de configuratie-instellingen meestal worden verkregen van a babelrc het dossier.

 Var Babel = vereist ("@ Babel / Core");
importeren {transformatie} van "@ babel / core";
Importeren * als Babel van "@ Babel / Core";
babel.transform ("code ();", opties,
functie (err, resultaat) {
result.code;
Resultaat.map;
resultaat.
}); 

16. Vormen hele bestanden

Broncode wordt meestal niet opgeslagen in tekenreeksvariabelen. De Babel API rekent hiervoor via een reeks bestandsgerelateerde functies, die de invoerreeks voor een variabele met een bestandsnaam afleveren. De resultaten worden echter geretourneerd als een normale javascript-variabele.

 Babel.transformFile ("bestandsnaam.js", opties,
functie (err, resultaat) {
resultaat; // = & GT; {Code, MAP, AST}
​
); 

17. Synchronisatie en async

Babel 7 introduceerde synchrone en asynchrone versies van de meeste API-oproepen. Zorg ervoor dat u de juiste opneemt voor uw behoeften - terwijl u kleine voorbeelden op de vlucht kunt uitvoeren, kunt u instellen dat Babel los op complexere bestanden gemakkelijk kan leiden tot vertragingen die in tientallen seconden lopen.

18. Leer over individuele plug-ins

Mocht u ooit merken dat u zich afvraagt ​​over wat er gebeurt op de achtergrond, gewoon bezoek deze pagina ​Het biedt een lijst van alle plug-ins momenteel in de Babel-distributie, en bevat ook een paar hints voor iedereen die een eigen plug-in wil maken.

19. Strip out typescript

Babel is niet beperkt tot het uitzetten van JavaScript-elementen van New Age. Het product bevat een typescript-motor met een functie. Het stipt het typen van informatie en vervangt geavanceerde elementen. Helaas voert Babel geen typecontrole uit - dit elimineert een van de meest belangrijke voordelen van de typoscooptaal.

 {
"Presets": ["@ babel / preset-typescript"]
} 

20. Loop Babel online

Hoewel de transpilatiebedrijven meestal soepel uitwerken, komen er soms problemen op. In dat geval, de Babel Republic is nuttig. Het loopt Babel in de browser van uw werkstation en toont de invoer en uitvoer direct naast elkaar.

21. Leer over pijnpunten

Onze introductie heeft uitgelegd dat Babel wijdverspreid door verschillende projecten ziet. Babel's Mainerser-team vereenvoudigt versie-upgrades met een Gedetailleerd change-logboek ​Als u Babel programmatisch gebruikt, vergeet dan niet om de API-upgrade gids ​

Dit artikel is oorspronkelijk gepubliceerd in kwestie 283 van Creative Web Design Magazine Webdesigner ​ Koop hier nummer 283 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Hoe sneller, lichter javascript codecode
• 5 Awesome Javascript API's
• 27 Sjablonen voor de top-class