Sådan konverteres ES6 til ES5 vha. Babel

Gør din ES6-kode 100% browser understøttet

Så du vil begynde at bruge ES6, men er bekymret for browserstøtte og bagudkompatibilitet til din applikation? Ikke at bekymre dig, Babel kan hjælpe os der.

Babel er en transpiler (oversætter kode på et sprog til et andet computersprog på samme abstraktionsniveau), der kan omdanne vores ES6-kode til ES5. Jeg vil antage, at du ved, hvordan du bruger både node og npm og har dem begge installeret på din maskine. Hvis du ikke gør det, skal du starte her.

1. Installer Babel som Dev-afhængighed

De første ting er først at downloade Babel-kommandolinjegrænsefladen, som giver os mulighed for at bruge Babel i vores terminal. Naviger til din projektmappe på din kommandolinje, og skriv følgende kommando:

$ npm installere -D babel-cli

2. Skriv ES6-kode

Hvis du allerede har skrevet ES6-kode, er du foran spillet. Hvis du ikke gør det, gør det nu. Mit forslag ville være at huse dine JavaScript-filer i en mappe, f.eks. Src eller javascript. Jeg vil lave en eksempelfil:

// src / eksempel.js
klasse Hej {
  statisk verden () {
    console.log ('Hej, verden!');
  }
}
Hej Verden();

3. Installer env-forudindstilling og oprette .babelrc-fil

Nu hvor vi har vores JavaScript-kode, er vi nødt til at konfigurere Babel til at transponere den for os. Desværre kan Babel ikke gøre meget ud af boksen. Det har brug for passende plugins og forudindstillinger - kuraterede grupper af plugins - for at gøre arbejdet.

I vores tilfælde bruger vi env-forudindstilling og installerer det som en dev-afhængighed i dit projekt.

$ npm installere -D babel-preset-env

Nu har vi brug for vores .babelrc-fil. Ligesom hvordan npm er afhængig af package.json, bruger Babel .babelrc til at holde styr på de plugins og forudindstillinger, vi bruger.

Opret din .babelrc-fil:

$ touch .babelrc

Og skriv følgende:

// .babelrc
{
  "presets": ["env"]
}

4. Opret en npm build-kommando

Du behøver ikke at gøre dette, men det vil gøre det hurtigere og enklere, hvis du ofte skal transponere din kode.

Gå til din package.json-fil, hvor vi opretter et npm build-script ved hjælp af kommandoen babel. Babel-kommandoen tager to argumenter: stien til din ES6-kode og en sti, hvor du vil have din ES5-kode til at gå.

Hvis du har al din JavaScript-kode indeholdt i et bibliotek, kan du tilføje flag -d til kommandoen for at fortælle Babel om at kigge efter mapper i stedet for filer. For mit eksempel har jeg min JavaScript-kode i mit src-bibliotek, men ønsker, at min ES5-kode skal placeres i et build-bibliotek.

// pakke.json
...
"scripts": {
  "build": "babel src -d build",
},
...

5. Kør kommandoen Babel

Med din .babelrc-fil oprettet og din build-kommando klar, skal du bare køre den på din kommandolinje.

$ npm køre build

Du skal se dine konverterede JavaScript-filer i et build-bibliotek. Nu skal du bare inkludere / kræve dem i din ansøgning, og du skal være klar til at gå!