ES5 až ES6 s Lebab

Všichni milujeme vychytávky dodávané s ES6, mnohé z nich můžete vidět v Six Tiny But Awesome ES6 Features a Six More Tiny But Awesome ES6 Features, jako je podpora nativní třídy, funkce šipek a další vylepšení jazyka. Nyní, když prohlížeče podporují většinu těchto dodatků syntaxe, mnoho z nás spěchá s psaním kódu ES6 a krčí se při myšlence na aktualizaci staršího kódu. Údržba....není to bolest?! Enter Lebab: projekt, který převádí JavaScript napsaný v tradiční syntaxi JavaScriptu na jasnou, lesklou syntaxi ES6!

Lebab, jehož úkol je opakem úkolu Babel, je snadno použitelný nástroj příkazového řádku. Nainstalujte a poté použijte příkaz jako jakýkoli jiný modul:

$ npm install -g lebab

S nainstalovaným Lebabem můžete začít transformovat svůj starý JavaScript do krásy ES6. Můžete transformovat jeden soubor nebo celý vzor souborů:

# single file
$ lebab main.js -o main-es6.js --transform arrow

# pattern: .js files in `src/js`
$ lebab --replace src/js/ --transform arrow 

# pattern: used for any type of matching
$ lebab --replace 'src/js/**/*.jsx' --transform arrow

Musíte zadat jednu transformaci, která se použije na váš starší soubor JavaScript:

# Use arrow functions instead of `function` keyword when possible
$ lebab main.js -o main-es6.js --transform arrow

# Use `let` and `const` instead of `var` when possible
$ lebab main-es6.js -o main-es6.js --transform let

# Use template strings instead of string concatenation
$ lebab main-es6.js -o main-es6.js --transform template

Zde je stručný před a po JavaScriptu transformovaném společností Lebab:

/*
    BEFORE:
*/

// Let/const
var name = 'Bob', time = 'yesterday';
time = 'today';

// Template string
console.log('Hello ' + name + ', how are you ' + time + '?');

var bob = {
  // Object shorthand
  name: name,
  // Object method
  sayMyName: function () {
    console.log(this.name);
  }
};


/*
    AFTER:
*/
// Let/const
const name = 'Bob';

let time = 'yesterday';
time = 'today';

// Template string
console.log(`Hello ${name}, how are you ${time}?`);

const bob = {
  // Object shorthand
  name,
  // Object method
  sayMyName() {
    console.log(this.name);
  }
};

Je frustrující, že pomocí příkazového řádku můžete provádět pouze jednu transformaci najednou, takže pokud chcete věci urychlit, můžete použít programové rozhraní API:

import lebab from 'lebab';
const {code, warnings} = lebab.transform('var f = function(){};', ['let', 'arrow']);
console.log(code); // -> "const f = () => {};"

Seznam transformací, jejich spolehlivost nebo dokonce možnost přispět najdete na stránce Lebab GitHub.

Lebab je úžasný projekt, který nám všem může ušetřit spoustu ruční údržby. Měli byste slepě věřit všemu, co pochází z Lebabu? Asi ne. Usnadní nám život i ta nejjednodušší Lebabova proměna? Ano!