JavaScript - Babel

Opublikowano wto 09 czerwca 2020 w javascript • 2 min read

babel

Babel pozwala na transpilację/tłumaczenie kodu ES6+ do ES5 - sprawiając tym samym możliwość na interpretację kodu przez szerszą gamę środowisk od node.js po starsze przeglądarki internetowe. Babel jest oparty na małych wtyczkach, których instalacja pozwala na wykonanie oczekiwanej od niego pracy.

W jaki sposób działa Babel można również sprawdzić korzystając z narzędzia online Babel REPL

Jeśli korzystamy z VSC możemy zainstalować wtyczkę vscode-babel-repl, która dokonuje transpilacji w locie i wykorzystanie kodu wynikowego -> F1 -> babel repl

vscode-babel-repl

Instalacja lokalna

nmp install babel-cli --save-dev

Babel pozwala na instalację całych "ustawień" języka JS z danego roku wykorzystując słowo kluczowe preset a następnie esRok np. es2017.

nmp install babel-preset-es2017 --save-dev

nmp install babel-preset-react --save-dev

nmp install babel-preset-flow --save-dev

@babel/preset-env

Najłatwiej jest jednak wskazać aby babel automatycznie instalował potrzebne mu wtyczki wykorzystując:

npm install @babel/preset-env --save-dev

a następnie w pliku konfiguracyjny .babelrc to zaznaczyć

{
  "presets": ["@babel/preset-env"]
}

.babelrc - jest plikiem, w którym zawarte powinny być informacje na temat tego jakich wtyczek użyć oraz jakie pliki powinny być zignorowane - te informacje mogą znaleźć się zamiast tego w package.json

@babel/node

@babel/node - pozwala na transpilację kodu na bieżąco

https://babeljs.io/docs/en/next/babel-node.html

Instalacja (jeśli brakuje @babel/core)

npm install @babel/core @babel/node --save-dev

Automatyzacja Babel wykorzystując Gulp

babel+gulp

Instalacja gulp + babel core + @babel/preset-env oraz gulp-babel

nmp install gulp gulp-babel @babel/core @babel/preset-env --save-dev

W pliku konfiguracyjnym gulpfile.js definiujemy zadanie zmieniające ES5 na ES6

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
  gulp.src('src/app.js'); /* można dodać tu cały katalog lub listę zawierającą pliki źródłowe */ 
  .pipe(babel({  /* wykorzystując babel dokonaj transpilacji i zapisz do dist */
    presets: ["@babel/preset-env"]
  }))
  .pipe(gulp.dest('dist')) /* destination folder */
 )