Jak převést ES6 na ES5 pomocí Babel

Zajistěte, aby váš kód ES6 byl stoprocentně podporován

Chcete tedy začít používat ES6, ale máte obavy z podpory prohlížeče a zpětné kompatibility pro vaši aplikaci? Nebojte se, Babel nám tam může pomoci.

Babel je překladač (překládá kód v jednom jazyce do jiného počítačového jazyka na stejné úrovni abstrakce), který může náš kód ES6 změnit na ES5. Předpokládám, že víte, jak používat uzel i npm a nechat je nainstalovat na vašem počítači. Pokud tak neučiníte, začněte zde.

1. Nainstalujte Babel jako závislost Dev

První věcí je nejprve stáhnout rozhraní příkazového řádku Babel, které nám umožní používat Babel v našem terminálu. V příkazovém řádku přejděte do složky projektu a zadejte následující příkaz:

$ npm install -D babel-cli

2. Napište kód ES6

Pokud již máte napsaný kód ES6, máte před sebou hru. Pokud tak neučiníte, udělejte to hned teď. Mým návrhem by bylo uložit vaše soubory JavaScriptu do složky, jako je src nebo javascript. Udělám příklad:

// src / example.js
třída Hello {
  statický svět () {
    console.log ('Ahoj, svět!');
  }
}
Ahoj světe();

3. Nainstalujte přednastavení env a vytvořte soubor .babelrc

Nyní, když máme náš kód JavaScript, musíme nastavit Babel, aby nám jej transponoval. Bohužel, Babel nemůže udělat hodně z krabice. K práci potřebují příslušné pluginy a předvolby - kurátorské skupiny pluginů.

V našem případě budeme ve vašem projektu používat přednastavení env a instalovat jej jako závislost dev.

$ npm install -D babel-preset-env

Nyní potřebujeme náš soubor .babelrc. Stejně jako npm spoléhá na package.json, Babel používá .babelrc ke sledování pluginů a předvoleb, které budeme používat.

Vytvořte soubor .babelrc:

$ touch .babelrc

A napište následující:

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

4. Vytvořte příkaz sestavení npm

Nemusíte to dělat, ale pokud potřebujete transponovat svůj kód často, bude to rychlejší a jednodušší.

Přejděte do souboru package.json, kde vytvoříme skript npm build pomocí příkazu babel. Příkaz babel bere dva argumenty: cestu k vašemu kódu ES6 a cestu, kam máš jít.

Pokud máte veškerý kód JavaScript uložený v adresáři, můžete do příkazu přidat příznak -d, abyste Babel řekli, aby hledal adresáře místo souborů. V mém příkladu mám svůj kód JavaScript v adresáři src, ale chci, aby byl můj kód ES5 vložen do adresáře build.

// package.json
...
"skripty": {
  "build": "babel src -d build",
},
...

5. Spusťte příkaz Babel

Se vytvořeným souborem .babelrc a připraveným příkazem build jej spusťte v příkazovém řádku.

$ npm run build

Převedené soubory JavaScript byste měli vidět v adresáři buildu. Nyní vše, co musíte udělat, je zahrnout / vyžadovat je ve vaší aplikaci a měli byste být připraveni jít!