Jak převádět ECMAScript6 na Javascript

Všechny prohlížeče neumí nejnovější verze JavaScriptu, naštěstí existují transpilery např. Babel a task runnery jako je Gulp, které novou syntaxi převedou na starou – kompatibilní.

PHPStorm je IDE pro práci se zdrojovým kódem, jak v něm používat ES6 se dočtete v návodu ECMAScript 6 in WebStorm: Transpiling. V podstatě je nutné nainstalovat Babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

babel-cli umožní spouštět Babel přes Terminál (konzoli)

preset-env dělá chytře menší výsledný kód

Poznámka: preset-react je nutný, pokud používáme React.

npm install --save @babel/polyfill

@babel/polyfill – umožní použití všech vymožeností moderního Javascriptu ES2015+ jako jsou Promise

Pak jen v Gulp (gulpfile.js) nastavíme tasky.

Gulp-babel

Nebo můžeme použít rovnou oboje dohromady pomocí Gulp-babel.

Instalace:
npm install --save-dev gulp-babel @babel/core @babel/preset-env

Použití (vytvoříme v editoru soubor gulpfile.js):

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);