Nastavení Babel sestavit es6+ Javascript kódy do zpětně kompatibilní verze Javascriptu v současné a starší prohlížeče nebo prostředí je asi nejjednodušší věc, kterou jsem narazil jako vývojář. Nicméně, trvalo mi čas si uvědomit, to a to bylo vzhledem k tomu, že Babel není jen balíček, zapojit do vašeho projektu, a to začne hrát ale skutečně potřebujete získat více balíčků dohromady, aby si to funguje, znát správné balíčky na výběr může být matoucí. V tomto blogu bych vysvětloval, jak můžete nastavit Babel, který vám pomůže sestavit vaše kódy ES6, es7, es8 atd. Javascript do verzí JavaScriptu, které lze spustit bez chyb v běhu NodeJS.

jak jsem řekl dříve, dostat Babel do práce zahrnuje získání několika balíčků z npm, takže začněme. První balíček, který bychom instalovali, je babel-core. Toto je motor babel, ale sám o sobě nemůže nic dělat, potřebuje nějaké další balíčky, které mu pomohou.

Spustit npm install @babel/core --save nainstalovat babel-jádro,

druhý balíček by jsme být instalace je babel-cli. Tento balíček zajišťuje, že jsme schopni používat Babel z příkazového řádku, a protože pracujeme v prostředí uzlu, měli bychom to určitě potřebovat.

Spustit npm install @babel/cli --save nainstalovat babel-cli

možná Budete chtít zahrnout babel skript v skript část package.json jako je tento:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

To nám pomůže vyhnout se psaní dlouhých a matoucí příkazy v rozhraní příkazového řádku pokaždé, když chceme sestavit.

Testování

Nyní, s těmito dvěma balíčky, můžeme skutečně něco udělat s babel, jen aby se cítil to, co babel je, nicméně, žádná transformace by mohlo dojít.

Vytvořit test.js soubor a napsat nějaký JavaScript es6 kódy v to, pak jděte do příkazového řádku a spustit

npm run babel test.js -- --out-file compiledTest.js

měli Byste vidět nový compiledTest.js souboru a tento soubor bude obsahovat jen to samé, co jste napsal v test.js, tak, žádné sestavování došlo, ale Babel je pracovní.

příkaz jsme provedli výše, je prostě říká Babel sestavit test.js soubor do výstupního souboru s názvem compiledTest.js. Pokud potřebujete kompilovat soubory v adresáři, jen to udělat:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Tak, aby si Babel dělat skutečné kompilace, je potřeba nainstalovat některé pluginy pomoci babel-core. Pravdou je, že babel nedělá nic sám, používá nainstalované pluginy k provádění své magie. Pro to, abychom mohli sestavit es6+ kódy, bychom měli nainstalovat env předvolby

Spustit npm install @babel/preset-env --save nainstalovat env předvolby

Počkejte, neříkal jsem, že babel potřebuje pluginy, tak co to sakra je přednastaveno? Předvolba je jen skupina pluginů, takže mám pravdu, babel potřebuje plugin nebo pluginy.
env preset je skupina pluginů, které pomáhají kompilovat moderní / budoucí verze JavaScriptu (ES2015, ES2016 atd.) do aktuálně podporované verze JavaScriptu.

po instalaci tohoto balíčku, musíme říct Babel,

Hej guy, právě jsem nainstaloval sadu pluginů, které chci, abyste použít pro mé kompilace.

mohli Bychom to udělat tím, že vytvoří .babelrc souboru a daný soubor bude obsahovat tento úryvek

{
"presets" : 
}

Nyní přejděte do příkazového řádku a zkuste sestavování naše test.js soubor znovu.

Pokud compiledTest.js soubor obsahuje es5 verze test.js po sestavení je provedeno tak, že je to; máme jen nastavit babel, ale pokud tomu tak není, pak možná budete chtít zkontrolovat, pokud všechno šlo dobře od začátku.

Jen pro potvrzení, vaše struktura souboru by měl být něco podobného jako je tohle:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Kompilace za běhu

Někdy, nechcete kompilovat všechny vaše kódy, první před provedením nimi; chcete jen sestavování a provádění, aby se stalo ve stejnou dobu. K dosažení tohoto cíle byste měli použít příkaz babel-node. Tento příkaz je dodáván s balíčkem babel-cli a je to jako náhrada příkazu node. Takže místo toho, něco jako tato node ./path/to/file spustit soubor, uděláte babel-node ./path/to/file kompilace a spuštění souboru současně.

Všimněte si, babel-node není v příkazovém řádku ve výchozím nastavení, takže může být potřeba upravit skript část package.json zahrnout

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

spustit soubor, jako je tento:

npm run babel-node ./path/to/file

Závěr

napsal jsem/aktualizován tento blog post s babel-core na verzi 7.2.0, pokud zjistíte, že babel udělal nějaké převratné změny v nastavení procesu v nějaké vyšší verze, můžete, dejte mi vědět ([email protected]) tak, že bych aktualizovat tento blog post, děkuji.