Articles /

Aan de slag met Babel 7

JavaScript is uniek vanwege de breedte van het ecosysteem. Nieuwe standaarden voegen syntactische suiker toe, maar het kost tijd om ze ondersteund te krijgen in browsers. Babel omzeilt dit probleem via automatische transpilatie.

Het idee achter het product is eenvoudig: Babel neemt in ES6 of ES7 code en vervangt nieuwe syntactische elementen met emulatie code. De uitvoer ervan bevestigt de klassieke JavaScript-syntaxis en draait op oudere browsers zoals Internet Explorer.

Babel’s eerste release veroverde de wereld als een storm. Al snel nadat het voor het eerst verscheen, hebben verschillende frameworks zoals React, Vue en Ember het omarmd. 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 ik een app

Deze afhankelijkheden veranderden het releaseproces van de voorganger in een conflictrijke aangelegenheid. Versie 7, nog steeds beheerd door een klein onderhoudsteam, heeft daarom geprobeerd zo compatibel mogelijk te zijn. Brekende veranderingen zijn zeldzaam, terwijl de kwaliteit van de code hoog blijft (als u met een team werkt, helpt het opslaan van documenten in cloud opslag u om samenhangend te blijven).

Als u nog niet eerder met Babel heeft gewerkt, laat dit dan uw gids zijn. In staat zijn om geavanceerde JavaScript-functies te gebruiken zonder compatibiliteitszorgen maakt het leven veel gemakkelijker.

Wilt u enkele hulpmiddelen om uw proces te stroomlijnen? Onze gids voor de beste website bouwer zal u helpen. Wilt u ondersteuning op lange termijn? Neem de juiste web hosting service.

Version check

Babel leeft gewoonlijk in de Node runtime omgeving. Laten we beginnen met het controleren van de gebruikte versies. De uitvoer geeft de versiestatus die gevonden is op het Ubuntu 14.04 werkstation dat gebruikt is om het volgende artikel te maken. Dit is geen pedanterie – de figuur bij deze stap laat zien dat het Babel team ondersteuning voor een flink aantal Node.js versies heeft laten vallen.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Verandering van pakketnamen

Een doorbrekende verandering in versie 7 betrof het verplaatsen van de Babel pakketten naar hun eigen namespace. Oudere pakketten werden niet verwijderd uit de verschillende repositories. Dit is belangrijk, omdat het gebruik van oudere package namen leidt tot de situatie zoals getoond in de figuur bij deze stap.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Een build action toevoegen

De stap hierboven gaat er van uit dat u werkt binnen een npm project. In dat geval is het uitvoeren van Babel via de build action eenvoudig. Open package.json en pas het aan zoals gedemonstreerd in de code hieronder:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpileer code met de hand

Om Babel aan het werk te zetten moet u de build action starten. Dit kan het beste gedaan worden via het npm run commando. De -d waarde informeert Babel dat de resultaten in de lib folder moeten worden geplaatst – de figuur bij deze stap laat zien dat de folder on the fly wordt aangemaakt.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

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 krijgt over de doelomgeving. Dit kan worden gedaan via een opdrachtregel parameter, of door een bestand genaamd .babelrc in de project root aan te maken.

Configureer de babelrc

Babel configureert zichzelf via een set plugins, die elk transpilatie transformaties toepassen op de code base. Wij gebruiken het preset-env pakket – het komt met een voorgeconfigureerde set van transformaties bedoeld om de meeste bases te dekken.

{"presets": }

Tijd voor een testrit

Een beetje new-age JavaScript toevoegen aan index.js om het programma te testen met wat live code. De code die bij deze stap hoort, zou niet werken op oudere browsers – de impliciete functie wordt vervangen door een normale declaratie, zoals te zien is in de figuur.

function tamstest(){.map((n) => n + 1);}

Aanpassen targeting

preset-env past standaard de meeste transpilaties toe: het doel van het product is om universeel compatibele JavaScript te maken zonder rekening te houden met de kosten van bandbreedte en prestaties. Je kunt de configuratie veranderen door een targets object mee te geven – het voorbeeld hieronder richt zich op specifieke versies van Chrome en IE.

{"presets": ]}

Geavanceerde targeting

Babel’s browser targeting is niet beperkt tot Chrome en Internet Explorer. Dankzij de samenwerking met browserslist, kunnen ontwikkelaars mixen en matchen uit meer dan een dozijn targets, zoals hieronder getoond.

Namen zijn hoofdletterongevoelig:

  • Android voor Android WebView.
  • Baidu voor Baidu Browser.
  • BlackBerry of bb voor Blackberry-browser.
  • Chrome voor Google Chrome.
  • ChromeAndroid of and_chr voor Chrome voor Android.
  • Edge voor Microsoft Edge.
  • Electron voor Electron framework. Het zal worden omgezet naar Chrome versie.
  • Explorer of ie voor Internet Explorer.
  • ExplorerMobile of ie_mob voor Internet Explorer Mobile.
  • Firefox of ff voor Mozilla Firefox.
  • FirefoxAndroid of and_ff voor Firefox voor Android.
  • iOS of ios_saf voor iOS Safari.
  • Node voor Node.js.Opera voor Opera.
  • OperaMini of op_mini voor Opera Mini.
  • OperaMobile of op_mob voor Opera Mobile.
  • QQAndroid of and_qq voor QQ Browser voor Android.
  • Safari voor desktop Safari.
  • Samsung voor Samsung Internet.
  • UCAndroid of and_uc voor UC Browser voor Android.

Geavanceerde targeting, deel twee

Browserlist kan ook geavanceerde query’s nemen. De homepage geeft een overzicht van de configuratie opties, die bijna allemaal ook binnen Babel gebruikt kunnen worden door babelrc aan te passen. Queries kunnen lokaal worden geëvalueerd als npx op uw werkstation is geïnstalleerd.

{"targets": "> 0.25%, not dead"}

Automatische transpilatie

Het met de hand aanroepen van Babel wordt snel vervelend. Het nodemon hulpprogramma controleert bestandssysteem bronnen en vuurt commando’s af als veranderingen worden gedetecteerd. In theorie kan ondersteuning voor nodemon worden toegevoegd door een kleine wijziging in package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Controleer op aanwezigheid

Op sommige werkstations is nodemon al geïnstalleerd. Als dit niet het geval is, zal het aanroepen van het programma een foutmelding geven zoals hieronder. Gelukkig kan nodemon eenvoudig worden geïnstalleerd via het commando npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Controleer de functionaliteit

Start npm start in een terminalvenster en verander de inhoud van index.js met een editor zoals gedit of Visual Studio Code. Na het opslaan zal nodemon statusinformatie uitvoeren.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Fix transpilation

Terwijl de detectie van nodemon op dit punt vlekkeloos zou moeten werken, wordt de inhoud van het index.js bestand dat in lib wordt gevonden niet bijgewerkt. Dit wordt veroorzaakt door een aardigheidje van babel-node – het commit de getranspileerde bestanden niet op de schijf. In plaats daarvan vuurt het een aangepaste versie van de Node CLI af, die werkt met de getranspileerde bestanden.

Transpileer code programmatisch

Babel is niet beperkt tot werken op de commandoregel. Als de juiste pakketten zijn geïnstalleerd, kan code ook vanuit een ander programma worden getranspileerd. Het knipsel bij deze stap past een aantal basis transformaties toe op een invoer string. Hou er rekening mee dat de configuratie-instellingen, gewoonlijk, worden verkregen uit een babelrc bestand.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpileer volledige bestanden

Broncode wordt gewoonlijk niet opgeslagen in string variabelen. De Babel API houdt hier rekening mee via een aantal bestands-gerelateerde functies, die de input string vervangen door een variabele met een bestandsnaam. De resultaten worden echter geretourneerd als een normale JavaScript variabele.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync en async

Babel 7 introduceerde synchrone en asynchrone versies van de meeste API aanroepen. Zorg ervoor dat u de juiste kiest voor uw behoeften – terwijl het transporteren van kleine voorbeelden direct kan worden gedaan, kan het loslaten van Babel op complexere bestanden gemakkelijk leiden tot vertragingen van tientallen seconden.

Leer over individuele plugins

Wanneer u zich ooit afvraagt wat er op de achtergrond gebeurt, bezoek dan deze pagina. Hier vindt u een lijst van alle plugins die momenteel in de Babel-distributie zitten, en ook een paar hints voor iedereen die zelf een plugin wil maken.

Streep TypeScript-specifiekheden weg

Babel is niet beperkt tot het transporteren van new-age JavaScript-elementen. Het product bevat een TypeScript-engine met beperkte mogelijkheden. Het stript type-informatie en vervangt geavanceerde elementen. Helaas voert Babel geen type-checking uit – dit elimineert een van de belangrijkste voordelen van de TypeScript taal.

{"presets": }

Run Babel online

Hoewel de transpilatie operaties meestal vlot verlopen, doen zich soms problemen voor. In dat geval is de Babel REPL nuttig. Het draait Babel in de browser van uw werkstation en toont invoer en uitvoer direct naast elkaar.

Leer over pijnpunten

Onze introductie legde uit dat Babel wijdverbreid gebruik ziet in verschillende projecten. Het onderhoudsteam van Babel vereenvoudigt versie-upgrades met een gedetailleerd wijzigingslogboek. Als u Babel programmatisch gebruikt, vergeet dan niet om de API upgrade gids te raadplegen.

Dit artikel is oorspronkelijk gepubliceerd in nummer 283 van het creatieve web design magazine Web Designer. Koop uitgave 283 hier of abonneer u hier op Web Designer.

  • Hoe u sneller en lichter JavaScript codeert
  • 5 geweldige Javascript API’s
  • 27 website sjablonen van topklasse

Leave a Reply