ES5 para ES6 com o Lebab

Todos nós adoramos as vantagens que vêm com o ES6, muitas das quais o senhor pode ver em Seis recursos minúsculos, mas incríveis, do ES6 e Mais seis recursos minúsculos, porém incríveis, do ES6O senhor está se apressando para escrever código ES6, como suporte a classes nativas, funções de seta e outras melhorias na linguagem. Agora que os navegadores suportam a maioria dessas adições de sintaxe, muitos de nós estão se apressando para escrever código ES6 e, ao mesmo tempo, se encolhendo com a ideia de atualizar códigos mais antigos. Manutenção…. Não é uma dor de cabeça?! Entre Lebab: um projeto que transpila o JavaScript escrito na sintaxe tradicional do JavaScript para a brilhante sintaxe ES6!

Lebab, cuja tarefa é o oposto da Babelé um utilitário de linha de comando fácil de usar. Instale e use o comando como qualquer outro módulo:

$ npm install -g lebab

Com o Lebab instalado, o senhor pode começar a transformar seu JavaScript antigo na beleza do ES6. O senhor pode transformar um único arquivo ou um padrão inteiro de arquivos:

# 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

O senhor deve especificar uma transformação a ser aplicada ao seu arquivo JavaScript legado:

# 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

Aqui está um rápido antes e depois do JavaScript transformado pela 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);
  }
};

É frustrante que o senhor só possa realizar uma transformação por vez por meio da linha de comando, portanto, se quiser agilizar as coisas, poderá usar a API programática:

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

Para obter uma lista de transformações, sua confiabilidade ou até mesmo para contribuir, consulte o site Página do Lebab no GitHub.

O Lebab é um projeto incrível que pode nos poupar de muita manutenção manual. O senhor deve confiar cegamente em tudo o que vem do Lebab? Provavelmente não. Até mesmo a mais simples das transformações do Lebab tornará nossa vida mais fácil? Sim!