een beginnersgids voor Babel

dit artikel introduceert Babel, een JavaScript-compiler waarmee ontwikkelaars de volgende generatie JavaScript vandaag kunnen gebruiken.

het kan frustrerend zijn om JavaScript te schrijven bij het bouwen van webapplicaties. We moeten nadenken over de functies die beschikbaar zijn in de browsers die we targeting en wat er gebeurt als een functie niet is geïmplementeerd. Sommige mensen zouden aanraden om het gewoon niet te gebruiken, wat meestal een pijnlijke ervaring is als we iets ingewikkelds bouwen.

gelukkig staan sommige tools ons toe om ons geen zorgen te maken over wat er ondersteund wordt en gewoon de beste code te schrijven die we kunnen. Ze heten transpilers. Een transpiler is een hulpmiddel dat broncode als invoer neemt en nieuwe broncode als uitvoer produceert, met een andere syntaxis maar semantisch zo dicht mogelijk-of idealiter gelijkwaardig-bij het origineel.

Babel is vrijwel de standaard transpiler om modern JavaScript (ES2015+) te vertalen naar compatibele implementaties die draaien in oude browsers. Het is de perfecte oplossing als u zich wilt concentreren op het schrijven van JavaScript.

en hoewel het belangrijkste doel van Babel is om de nieuwste standaarden van ECMAScript (en) te vertalen voor oude — of soms huidige — browsers, kan het meer doen. Er is een ecosysteem van presets en plugins die het mogelijk maken de toevoeging van niet-standaard functies ook. Elke plugin maakt een nieuwe functie / transformatie beschikbaar voor uw code, en presets zijn slechts een verzameling van plugins.

aan de slag

er zijn verschillende manieren om Babel in te stellen, afhankelijk van uw project en de tools die u gebruikt. In dit artikel gaan we uitleggen hoe je Babel kunt instellen met behulp van de CLI, maar als je een build systeem of framework gebruikt, kun je specifieke instructies bekijken op de officiële site. Meestal is de CLI de snelste en gemakkelijkste manier om te beginnen, dus als je een eerste keer gebruiker, voel je vrij om verder te gaan.

de eerste stap om Babel in een project op te zetten is om het pakket met npm te installeren en toe te voegen als een dev-afhankelijkheid. Ervan uitgaande dat je een werkend knooppunt hebt.js omgeving al op zijn plaats, het is gewoon een kwestie van het uitvoeren van de volgende in uw terminal:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

dit zal een map (babel-test) in de map veranderen, een NPM-project initialiseren (waardoor een package.json bestand wordt aangemaakt) en dan de babel-cli installeren als een dev-afhankelijkheid.

als u hulp nodig hebt met het bovenstaande, raadpleeg dan onze tutorials over het installeren van Node en het werken met npm.

vervolgens kunnen we package.json openen en een build commando toevoegen aan onze NPM scripts:

"scripts": { "build": "babel src -d dist"}

dit zal de bronbestanden uit de src map nemen en het resultaat in een dist map weergeven. Dan kunnen we het uitvoeren als:

npm run build

maar wacht! Voordat we Babel uitvoeren, moeten we de plugins installeren en instellen die onze code zullen transformeren. De makkelijkste en snelste manier om dit te doen is om de env-voorinstelling toe te voegen, die de juiste plugins selecteert, afhankelijk van de doelbrowsers die u aangeeft. Het kan worden geïnstalleerd met behulp van:

npm install babel-preset-env --save-dev

maak vervolgens een .babelrc bestand aan in de root van uw project en voeg de voorinstelling toe:

{ "presets": }

het .babelrc bestand is de plaats waar u al uw instellingen voor Babel plaatst. U zult worden met behulp van deze in de eerste plaats voor het opzetten van presets en plugins, maar veel meer opties zijn beschikbaar. Je kunt de volledige lijst bekijken op de Babel API pagina.

houd er rekening mee dat, afhankelijk van uw besturingssysteem, bestanden die beginnen met een punt standaard worden verborgen. Als dit voor u problematisch is (of als u gewoon minder bestanden verkiest), kunt u uw Babel-instellingen in het package.json Bestand plaatsen, onder een babel sleutel, zoals zo:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

tot slot, laten we de mappen en bestanden maken die Babel verwacht te vinden:

mkdir src dist

en geef het iets om te transformeren:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

dit voorbeeld gebruikt destructuring toewijzing om de waarden van twee variabelen te wisselen.

Babel

Nu u een gebruiksklare Babel installatie hebt, kunt u het build commando uitvoeren om het compilatieproces uit te voeren:

npm run build

dit neemt de code van src/main.js, transformeert deze naar ES5-code en voert de getransformeerde code uit naar dist/main.js.

dit is wat het produceerde:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

zoals u kunt zien, is let vervangen door var en Babel heeft een tijdelijke variabele geïntroduceerd (aangeduid met de underscore) om de swap te vergemakkelijken.

en dat is het. De code die u schrijft in de src map zal worden vertaald naar eerdere versies van de taal. Als u standaard geen opties aan de voorinstelling toevoegt, worden alle transformaties geladen. U kunt ook de doelbrowsers als volgt aangeven:

{ "presets": } }] ]}

dit laadt de vereiste transformaties om de nieuwste twee versies van elke browser en Safari groter of gelijk aan Versie 7 te ondersteunen. U kunt de beschikbare opties voor de doelbrowsers vinden in de browserlist repository.

Babel Ecosysteem: Een snel overzicht

zoals u in de vorige sectie opmerkte, zal Babel niets op zichzelf doen wanneer u het installeert. We moeten een set plug-ins installeren om het gewenste gedrag te verkrijgen, of we kunnen presets gebruiken, die vooraf gedefinieerde sets van plug-ins zijn.

Gewoonlijk zal elke functie die u wilt opnemen de vorm hebben van een plugin. Enkele voorbeelden voor ES2015 omvatten:

• constanten
• pijlfuncties
• block-scoped functies
• klassen
• voor-of
• spread
• template literals

zie de Plugins pagina in de Babel Docs voor een volledige lijst.

maar soms wil je niet alle plugins een voor een op te nemen. Dus er zijn prebuilt presets die het proces van het installeren van elke plugin zal vergemakkelijken.

de drie officiële presets die momenteel beschikbaar zijn zijn::

• Env
• React
• Flow

Env is de meest gebruikte en degene die we hier hebben gebruikt. Het laadt automatisch alle noodzakelijke transformaties om uw code compatibel te maken, afhankelijk van de beoogde browsers.

de React-voorinstelling transformeert code die typisch wordt gevonden in React-projecten, waarbij voornamelijk compatibiliteit met Flow-annotaties en JSX wordt toegevoegd.

en tenslotte wordt de Flow-voorinstelling gebruikt om de code op te schonen van Flow type annotaties (hoewel het niet controleert of de types geldig zijn of niet.)

Babel Polyfill

er zijn JavaScript-functies die niet syntactisch kunnen worden getransformeerd, meestal omdat er geen gelijkwaardige functionaliteit is geïmplementeerd – bijvoorbeeld Promises en generatorfuncties.

dit soort functies moet in de browser geïmplementeerd worden door een bibliotheek die gebruikt kan worden in je code, en dat is het werk van een polyfill.

De Babel polyfill is samengesteld door core-js en de Regenerator runtime. Samen bestrijken ze alle functies in ES2015+.

geavanceerd gebruik

zoals gezegd kan Babel ook worden gebruikt om functies te transformeren die nog niet in de taal zijn geïmplementeerd. Een goed voorbeeld hiervan is de class fields proposal (momenteel in tc39 fase 3: kandidaat). Dit is vooral populair onder React devs, omdat het de noodzaak om expliciet methoden te binden aan een bepaalde component wegneemt, en ook betekent dat een component state kan worden gedeclareerd als een klasse veld (mogelijk elimineert de noodzaak voor een constructor).

voor degenen onder u die vandaag klassenvelden willen gebruiken, moet u de babel-plugin-transform-class-properties toevoegen als een dev-afhankelijkheid:

npm install --save-dev babel-plugin-transform-class-properties

u zou ook uw .babelrc bestand als volgt bijwerken:

{ "presets": , "plugins": }

nu kun je schrijven:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

en daar houdt het niet op. U kunt Babel ook gebruiken om nieuwe functies van uw eigen toe te voegen aan de taal, zoals onze tutorial begrijpen ASTs door het bouwen van uw eigen Babel Plugin laat zien.

alternatieven

het schrijven van moderne webapplicaties vereist soms meer dan de functies die beschikbaar zijn in JavaScript. Andere talen kunnen ook worden vertaald naar compatibele JavaScript, maar ook implementeren van andere handige functies.

de meest populaire optie is TypeScript, een regulier JavaScript dat moderne ES-functies implementeert maar ook andere functies toevoegt, vooral met betrekking tot typeveiligheid.

aan de andere kant zijn er totaal verschillende talen in verschillende categorieën, van functionele talen zoals PureScript tot objectgeoriënteerde talen zoals Dart.

voor een dieper overzicht van alternatieve talen, kijk naar 10 talen die naar JavaScript compileren.

conclusie

Babel is een geweldige optie voor het schrijven van moderne applicaties terwijl het nog steeds JavaScript aanbiedt dat door alle ontwikkelaars kan worden begrepen en het brede scala aan browsers waarin de code moet worden uitgevoerd.

Babel is niet alleen nuttig voor het omzetten van ES2015+ naar eerdere versies van de taal — zowel in de browser als op platforms zoals Node.js – maar ook voor het toevoegen van nieuwe functies die geen deel uitmaken van de standaard. Om te zien wat ik bedoel, neem gewoon een kijkje op de NPM directory om alle beschikbare Babel plugins of presets te vinden.

aangezien JavaScript in zo ‘ n snel tempo evolueert, is het duidelijk dat browserfabrikanten een tijdje nodig hebben om de nieuwste functies te implementeren. Babel een plaats geven in je toolkit betekent dat je vandaag de dag cutting-edge JavaScript kunt schrijven, veilig in de wetenschap dat je geen van je gebruikers in de steek laat. Wat is er niet lief te hebben?