Konfiguracja Babel do kompilacji kodów ES6+ Javascript do wstecznie kompatybilnej wersji JavaScript w obecnych i starszych przeglądarkach lub środowiskach jest prawdopodobnie najłatwiejsza rzecz, z którą spotkałem się jako deweloper. Jednak zajęło mi to trochę czasu, aby zdać sobie z tego sprawę, a było to spowodowane faktem, że Babel nie jest tylko pakietem, który podłączasz do swojego projektu i zaczyna grać, ale w rzeczywistości musisz zebrać wiele pakietów, aby to działało, wiedząc, że odpowiednie pakiety do wyboru mogą być mylące. W tym poście na blogu wyjaśnię Ci, jak skonfigurować Babel, aby pomóc ci skompilować kody Javascript es6, es7, es8 itp. do wersji Javascript, które mogą działać bez błędów w czasie pracy NodeJS.

jak powiedziałem wcześniej, doprowadzenie Babela do działania wiąże się z pobraniem kilku pakietów z npm, więc zaczynajmy. Pierwszy pakiet, który chcemy zainstalować, to babel-core. To jest silnik babel, ale tak naprawdę nie może nic zrobić sam, potrzebuje innych pakietów, aby mu pomóc.

Uruchomnpm install @babel/core --save aby zainstalować babel-core

drugi pakiet, który będziemy instalować, tobabel-cli. Ten pakiet zapewnia, że jesteśmy w stanie używać Babel z wiersza poleceń, a ponieważ pracujemy w środowisku węzłów zdecydowanie powinniśmy tego potrzebować.

Uruchomnpm install @babel/cli --save aby zainstalować babel-CLI

możesz dodać skrypt babel do sekcji skrypt twojegopackage.json w ten sposób:

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

to pomoże nam uniknąć wpisywania długich i mylących poleceń w interfejsie wiersza poleceń za każdym razem, gdy chcemy skompilować.

testowanie

teraz, z tymi dwoma pakietami, możemy rzeczywiście zrobić coś z babel, tylko po to, aby poczuć, czym jest babel, jednak żadna transformacja nie nastąpiłaby jeszcze.

Utwórz plik test.js I Zapisz w nim kody JavaScript es6, następnie przejdź do wiersza poleceń i uruchom

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

powinieneś zobaczyć nowy plik compiledTest.js I ten plik będzie zawierał to samo, co Ty.napisał w test.js, więc nie doszło do kompilacji, ale Babel działa.

polecenie, które wykonaliśmy powyżej, po prostu nakazuje Babel skompilować pliktest.js do pliku wyjściowego o nazwiecompiledTest.js. Jeśli chcesz skompilować pliki w katalogu, po prostu zrób:

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

Tak więc, aby Babel zrobił rzeczywistą kompilację, musimy zainstalować kilka wtyczek, które pomogą Babel-core. Prawda jest taka, że babel sam nic nie robi, używa zainstalowanych wtyczek do wykonywania swojej magii. Aby móc skompilować kody es6+, powinniśmy zainstalować env preset

Uruchom npm install @babel/preset-env --save aby zainstalować env preset

czekaj, czy nie mówiłem, że Babel potrzebuje wtyczek, więc co do cholery jest predefiniowane? Cóż, preset to tylko grupa wtyczek, więc mam rację, babel potrzebuje wtyczki lub pluginów.
env preset to grupa wtyczek, które pomagają kompilować nowoczesne/przyszłe wersje JavaScript (ES2015, ES2016 itp.) do aktualnie obsługiwanej wersji javascript.

Po zainstalowaniu tego pakietu, musimy powiedzieć Babel,

Hej koleś, właśnie zainstalowałem zestaw wtyczek, które chcę, abyś użył do mojej kompilacji.

zrobimy to, tworząc plik.babelrc I ten plik będzie zawierał ten fragment

{
"presets" : 
}

teraz przejdź do wiersza poleceń i spróbuj skompilować nasztest.js plik ponownie.

Jeśli plikcompiledTest.js zawiera wersję es5 plikutest.js po zakończeniu kompilacji, to koniec; właśnie skonfigurowaliśmy babel, ale jeśli nie, możesz sprawdzić, czy wszystko poszło dobrze od początku.

dla potwierdzenia, struktura pliku powinna być podobna do tej:

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

Kompilowanie w locie

czasami nie chcesz skompilować wszystkich kodów przed ich wykonaniem; po prostu chcesz, aby kompilacja i wykonanie miały miejsce w tym samym czasie. Aby to osiągnąć, należy użyć polecenia babel-node. Ta komenda jest dostarczana z pakietembabel-cli I jest tak jak zamiennik polecenianode. Zamiast więc robić coś takiego node ./path/to/file, aby uruchomić plik, wykonasz babel-node ./path/to/file, aby skompilować i uruchomić plik w tym samym czasie.

Uwaga, węzeł babel nie jest domyślnie w wierszu poleceń, więc być może będziesz musiał zmodyfikować sekcję skryptu swojegopackage.json, aby dołączyć

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

i uruchomić plik w następujący sposób:

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

podsumowanie

napisałem/zaktualizowałem ten post na blogu z Babel-Core w wersji 7.2.0, jeśli dowiesz się, że Babel dokonał pewnych przełomowych zmian w procesie konfiguracji w niektórych wyższych wersjach, możesz dać mi znać ([email protected]) tak, że chciałbym zaktualizować ten wpis na blogu, dziękuję.