Há algum tempo, pessoas ao redor de todas as comunidades JavaScript vêm declarando que já é possível usar o ES6 para produzir aplicativos JavaScript. Além do fato de que os navegadores estão implementando cada vez mais da especificação, existem vários transpilers ótimos que converterão o seu código ES6 em código ES5, como Traceur e Babel (conhecido como 6to5, que recentemente mudou seu nome). Além disso, existem mais e mais ferramentas saindo para tornar o fluxo de trabalho mais simples e mais robusto.

As várias ferramentas “antigas”

Até agora, nós tivemos que usar várias ferramentas para tornar o desenvolvimento em ES6 possível, pelo menos foi isso o que você fez se tiver desenvolvido as coisas “corretamente”, separando seus módulos em arquivos separados e usando um sistema de carregamento de módulos para se certificar de que todas as dependências sejam carregadas na ordem correta.

Você poderia escrever o seu JavaScript utilizando a sintaxe de módulo ES6 e convertê-lo para o sistema necessário, ou apenas escrevê-lo no estilo CommonJS ou AMD, dependendo do gerenciador de dependência que você usou. Então, você usaria Traceur ou Babel para converter o ES6 para ES5 e depois utilizaria RequireJS ou Browserify para combinar todos os módulos em um arquivo utilizável. Você também poderia pular RequireJS/Browserify e usar um polyfill para o módulo do carregador ES6.

De qualquer maneira, você precisa usar duas ferramentas separadas, além de um minifier e, com esperança, o sourcemaps vai funcionar durante todo esse grupo de ferramentas (supondo que você se preocupa com essas coisas, o que você provavelmente faz). Finalmente, você precisa de uma forma de baixar módulos de terceiros para usar em seu aplicativo. Browserify funciona muito bem com NPM, o que é ótimo, porque você, de qualquer maneira, provavelmente já está usando NPM (ou pelo menos deve tê-lo instalado) e tem um número extraordinário de pacotes disponíveis para você. Se estiver usando RequireJS, você pode usar qualquer pacote de gerenciamento que quiser e simplesmente configurá-lo para encontrar os arquivos que você precisa, ou pode usar algo como Bower e uma ferramenta adicional para automatizar a configuração, para que você não tenha que escrever todos esses caminhos para a configuração do arquivo você mesmo.

Agora, eu não quero fazer com que qualquer um desses fluxos de trabalho pareça algo terrível, porque eles têm servido para inúmeros desenvolvedores muito bem há algum tempo. Você pode configurar todos eles por meio do Grunt ou do Gulp, e há uma maneira automatizada simples de lidar com tudo. Uma vez que estiver tudo pronto, alguns dos fluxos de trabalho serão realmente muito simples e bem automatizados. A parte mais difícil é configurar as coisas…

A “nova” ferramenta

As coisas são diferentes agora. É extremamente simples obter toda aquela pipeline de ferramenta configurada usando uma única ferramenta: JSPM. JSPM é uma ferramenta de linha de comando que controla o gerenciamento de pacotes (ocupa o lugar do Bower ou do NPM), módulo de carga (substitui RequireJS ou Browserify), e lida com a transpilação do ES6 (assim, você não precisa usar de forma explícita o Traceur ou Babel, embora vá usá-los nos bastidores).

Depois de instalar o JSPM via NPM (npm install -g jspm) – você também pode checar o meu artigo anterior para ver como usá-lo sem instalá-lo globalmente) – você acabou de iniciar um projeto na linha de comando com jspm init, ele vai fazer algumas perguntas para configuração e, aí, está tudo pronto. Você pode começar a escrever o seu código ES6, usando jspm install para pegar todas as dependências que você pode precisar e, em seguida, usar o comando jspm bundle-sfx para compilar seu código em algo que possa usar no navegador.

A melhor forma de aprender sobre JSPM é vê-lo em ação, e já que atualmente não temos vídeos de minha autoria que mostram como usar JSPM, vou encaminhá-lo para a página inicial do JSPM, onde existem alguns vídeos ótimos de introdução na seção “Guias”.

Eu deixo você com isso por enquanto, mas devemos revisitar esse assunto no futuro, incluindo a possibilidade de fazer o meu próprio vídeo.

Conclusão

O desenvolvimento JavaScript está ficando constantemente mais fácil e mais automatizado, mas, com JSPM, estamos dando mais um grande passo à frente, especialmente no que tange a se mover para o futuro escrevendo ES6 hoje. Eu super encorajo todos a dar uma olhada nisso.

***

Joe Zim faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://www.joezimjs.com/javascript/simplifying-the-es6-workflow-with-jspm/