Pokud s Node.js moc nepracujete, je velká šance, že jste neprozkoumali nové syntaxe do jazyka JavaScript poskytované ES2015. Tyto jazykové přídavky zahrnují funkce šipek, třídy, rozsah bloků a další. Tyto jazykové přídavky se pomalu dostaly do Chromu a Firefoxu, takže pokud jste si nenašli čas naučit se ES2015: teď je ten správný čas! A jaký lepší způsob, jak to udělat, než napsat svůj JavaScript v ES2015 a použít Babel k jeho převedení do „tradičního“ JavaScriptu pro prohlížeč? Dovolte mi, abych vám ukázal, jak začít!
Krok 1: Nainstalujte Babel s doplňkem ES2015
Babel's CLI je k dispozici jako balíček od NPM, takže začneme jeho instalací:
npm install babel-cli
Dále nainstalujeme babel-preset-es2015 addon, abychom mohli použít nové přídavky syntaxe:
npm install babel-preset-es2015
Babel má mnoho doplňků pro různé jazykové úpravy (jako JSX), ale tento jeden doplněk je vše, co potřebujeme, abychom mohli začít.
Krok 2: Vytvořte .babelrc Soubor
Malý soubor nám umožňuje vytvořit předvolbu pro použití babel; protože máme pouze babel-preset-es2015 addon, přidáme to pouze do souboru:
echo '{ "presets": ["es2015"] }' > .babelrc
V tuto chvíli máme nainstalovaný Babel a nastavené předvolby!
Krok 3: Vytvořte si soubory JavaScriptu!
Zábavná část bude hrát si s novou syntaxí! Zde je velmi jednoduchý fragment kódu s funkcemi šipek:
// Just playing around, this doesn't really do anything
((con) => {
['yes', 'no'].forEach((item) => {
con.log(item);
})
})(console);
babel-preset-es2015 addon také podporuje třídy JavaScript a další, ale nechme naši ukázku jednoduchou. OK, ukázka je vytvořena, pojďme ji převést do "tradičního" JavaScriptu pro prohlížeče, které ještě nepodporují ES2015!
Krok 4: Proveďte JavaScript
S Babelem a naším JavaScript kódem připraveným k ošetření spustíme proces:
./node_modules/.bin/babel src -d dest
Tento příkaz transpiluje každý soubor JavaScript v src a umístí jej do dest adresář. Náš vzorový soubor JavaScript se stává:
'use strict';
(function (con) {
['yes', 'no'].forEach(function (item) {
con.log(item);
});
})(console);
Poznáte to jako něco, co píšete roky!
Je důležité si uvědomit, že pokud vám nezáleží na prohlížeči, můžete jednoduše spustit node myFile.js a ujistěte se, že váš kód funguje správně (protože aktuální uzel je vybaven syntaktickým cukrem ES2015). Je také důležité zdůraznit, že funkce šipek byly pouze mým příkladem a že ES2015 má mnohem, mnohem více syntaktických aktualizací. Syntaxe funkce šipky navíc mění důsledky vazby, proto si před použitím prostudujte každý typ syntaktické aktualizace!
Udělejte si čas a pohrajte si s ES2015 – brzy bude ve všech hlavních prohlížečích a měl by být rychlejší na psaní a kompaktnější. Jakmile začnete, budete se snažit používat novou syntaxi všude!