Bekijk onze Babel 7- en Webpack 4-videocursus:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Neem uw JavaScript-vaardigheden naar een hoger niveau:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel is een toolchain die voornamelijk wordt gebruikt om ECMAScript 2015+-code om te zetten in een achterwaarts compatibele versie van JavaScript in huidige en oudere browsers of omgevingen. ECMAScript 2015+ staat gelijk aan ES6+.
Je kunt Babel zien als een vertaler. ES6 + JS biedt ons veel nieuwe functies en syntaxis. Ze kunnen onze ontwikkeling efficiëntie enorm verbeteren. Maar op dit moment zijn de meeste van deze nieuwe functies onherkenbaar in browsers. Om een balans te vinden tussen compatibiliteit en ontwikkelgemak en -efficiency, is Babel ontwikkeld.
Wij programmeurs schrijven codes in ES6+ en vragen Babel vervolgens om ze te vertalen in codes die browsers wel kunnen begrijpen.
Babel zelf kan alleen overweg met het vertalen van nieuwe syntaxen. ES6+ heeft ook veel nieuwe API’s toegevoegd, zoals Promise, Map, Object.assign(), enz. Nieuwe API betekent nieuwe objecten, eigenschappen en methoden. API is gewoon een mooie naam. Laat je er niet door intimideren. Om er mee om te gaan, moeten we deze API’s toevoegen aan ES5. Dit werk wordt gedaan door een assistent van Babel. We zullen je later laten zien wie deze assistent is.
Dus onthoud deze conclusie: Babel vertaalt nieuwe syntaxen en zijn assistent handelt nieuwe API’s af.
Ga eerst naar de officiële website van Babel en klik op de knop Docs.
Babel zorgt voor de vertaling van de syntaxis. Polyfill zorgt voor ontbrekende functies. Dus antwoord op de vraag die we eerder stelden: de assistent van Babel is polyfill.
Naast het vertalen van ES6+, kan Babel ook overweg met JSX en TypeScript. Dus hier komt een ander concept: preset. Preset is de vertaling die Babel gebruikt. Het bepaalt hoe Babel de vertaling doet.
Dus nu, heb je twee belangrijke concepten van Babel geleerd: preset en polyfill.
Volgende, laten we Babel installeren.
Babel installatie en configuratie:
Dit is het installatie commando voorgesteld door de officiële handleiding van Babel. Als u goed kijkt, zult u zien dat er eigenlijk vier pakketten worden geïnstalleerd, drie als ontwikkelingsafhankelijkheid en een als productieafhankelijkheid.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, zoals de naam al doet vermoeden, is de kern van het hele Babel programma.
Babel/cli is de opdrachtregel interface. We gebruiken het om te communiceren met Babel.
Babel zelf weet niet hoe het ES6 codes moet vertalen. Er zijn plugins nodig om te vertellen hoe dat moet. Er zijn veel plugins. Ze een voor een installeren en instellen is een arbeidsintensieve klus. Daarom is de beste oplossing het gebruik van babel preset. Een voorinstelling is een verzameling van plugins. De preset die wij gebruiken is preset-env.
Babel/preset-env is de standaard die Babel 7 gebruikt om ES6+ te vertalen naar ES5. In Babel 7 is preset-env in de plaats gekomen van preset-2015/6/7, enzovoort.
Babel/polyfill is bedoeld om ES6+-functies toe te voegen aan ES5. Waarom moeten we dat dan doen?
Nieuwe syntaxis is niet het enige verschil tussen ES6 en ES5. ES6 heeft al veel nieuwe API’s gekregen. API is gewoon een mooie naam voor ingebouwde objecten. Deze nieuwe ingebouwde objecten zijn erg nuttig, maar het probleem is dat ze niet bestaan in de ES5-omgeving.
De enige oplossing is om deze ingebouwde objecten toe te voegen aan de ES5-omgeving. Dit is waar polyfill voor is.
Laten we onze eigen terminal aanzetten en een project opzetten.
Eerst zetten we terminal aan en maken een project root directory aan. Dan maken we er een CD in en npm init.
Volgende, we kopiëren de vier installatie commando’s uit de officiële handleiding van Babel en plakken ze in terminal.
Wanneer de installatie klaar is, zou u moeten zien dat deze vier pakketten worden geïnstalleerd:
Laten we ons project in VSC openen en het pakket controleren.json.
Cli, core, en preset-env zijn ontwikkelingsafhankelijkheden. polyfill is een productieafhankelijkheid.
Je kunt polyfill zien als een broncode. Het slaat bronnen op van alle es6 nieuwe functies.
ES5 + polyfill = ES6.
Voordat we Babel kunnen gebruiken, moeten we het configureren. De beste manier om dit te doen is door een bestand te maken waarin de configuratie-informatie van Babel wordt opgeslagen.
In Babel 6 slaan we de configuratie-informatie op in .babelrc of package.json.
Babel 7 biedt ons een nieuwe oplossing: babel.config.js.
De handleiding van Babel biedt ons een sjabloon voor het maken van babel.config.js. We hoeven het alleen maar naar de hoofdmap van ons project te kopiëren.
Eerst exporteren we een object in de module.
Dan definiëren we er een presets eigenschap in. De waarde van presets is een array.
Binnen de array zetten we nog een array.
Het eerste element van de kind-array is de voorinstelling die we willen gebruiken. Hier stellen we het in op @babel/env of @babel/preset-env.
Het tweede element is een config-object. Daarin staan twee eigenschappen: targets en useBuiltIns. Targets is voor het configureren van browsers en useBuiltIns voor polyfills.
Nu hebben we Babel geïnstalleerd en geconfigureerd.
Nu gaan we het testen.
In de hoofdmap van het project maken we een nieuw bestand: es6.js.
Dan zetten we terminal aan en voeren een babel commando in: npx babel es6.js. Dit is wat we krijgen:
ES6 let is omgezet in ES5 var.
NPX babel is hetzelfde als node_modules/.bin/babel
Nu hebben we met succes ons eerste ES6-bestand “gebabeled”.
Je wilt misschien het vertaalde bestand als een onafhankelijk bestand uitvoeren. In dat geval hebt u -o of – output-dir nodig.
-o en – output-file kunnen slechts één bestand tegelijk vertalen. In uw echte ontwikkeling wilt u misschien ES6-bestanden in één directory opslaan en elk bestand in die directory vertalen.
In de hoofddirectory van het project maken we bijvoorbeeld twee kinddirectory’s aan: ES6 en ES5. We schrijven onze ES6-bestanden in dir ES6. Daarna “Babel” we ze in dir ES5. HTML bestanden linken JS bestanden uit dir es5.
In dit geval is het commando dat we nodig hebben npx babel ES6 -d ES5 of npx babel ES6 – out-dir ES5.
Nu worden alle bestanden in dir ES6 “gebabeled” naar dir ES5.
Nu laten we zien wat polyfill voor ons kan doen.
Dit is het bestand dat we willen babelen:
Het maakt gebruik van veel ES6 API’s die niet in ES5 bestaan. De enige manier om ze in een ES5-omgeving te laten werken is om broncodes van deze nieuwe API’s aan de ES5-omgeving toe te voegen. Dit is waar polyfill voor is en dit is ook de reden waarom polyfill is geïnstalleerd als een productieafhankelijkheid. We hebben het nodig in productie.
Hier is een minder accurate analogie om je te helpen begrijpen waarom we polyfill nodig hebben.
Let op we hebben een jQuery programma. We kunnen ons jQuery programma niet rechtstreeks uitvoeren. We moeten eerst de jQuery broncode koppelen. Polyfill is de jQuery broncode die we koppelen.
Dit is het “babeled” ES5 bestand dat we kregen:
Zie je al die vereiste bestanden? Ze worden geladen door polyfill. Maar het “babeled” bestand kan niet direct door HTML bestanden worden gebruikt. We moeten ze bundelen met webpack. Maar alle benodigde “API-broncodes” zijn geladen.
Deze instelling wordt geregeld door de useBuiltIns eigenschap in babel.config.js. Deze eigenschap heeft drie waarden: use, false en entry.
Usage is de beste en meest gebruikte waarde. Dit is ook wat wij aanbevelen.
Naast gebruik, heeft useBuiltIns nog twee andere waarden: false en entry.
False schakelt polyfill uit. Dit betekent dat je de benodigde API’s handmatig moet koppelen. Dat wil je beslist niet doen.
Als je entry gebruikt, moet je “require” @babel/polyfillEntry aan het begin van je bestand. Dan zal Babel eerst de targets eigenschap controleren om erachter te komen wat de doel browsers zijn. Het zal alle API’s laden die niet worden ondersteund door de doel browser. Uiteraard krijgen we op deze manier veel onnodige API’s.
Samenvattend: stel useBuiltIns in op use en Babel regelt de rest voor je.
Bekijk onze VOLLEDIGE cursus Babel 7 en Webpack 4 op Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Bekijk onze VOLLEDIGE cursus webontwikkeling op Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD