A collaborative website about the latest JavaScript features and tools.
Send a Post

*using github

Jaydson Gomes
Posted by
Tue Oct 28 2014 12:49:54 GMT+0000 (UTC)

Módulos ES6 hoje com o 6to5

Eu postei a imagem abaixo no Twitter, mostrando o quanto feliz eu estava.
É muito legal o que os transpilers podem fazer. No mundo do JavaScript é como uma máquina do tempo, onde podemos avançar para um futuro próximo de coisas muito legais que a ES6 irá nos trazer.
Nesse tutorial nós vamos mostrar como começar a escrever ES6 modules hoje, usando o excelente 6to5;

modules today with 6to5

Primeiro passo

Se você não esta familiarizado com módulos ES6, por favor dê uma olhada no JSModules.io para ter uma breve introdução.
Eu também recomendo a leitura do artigo Uma nova sintaxe para módulos na ES6 do @jcemer, aqui mesmo no ES6Rocks, que cobre um monte de coisas mais legais sobre módulos no JavaScript.
Para esse tutorial nós vamos utilizar o 6to5 como transpiler.
Basicamente, o 6to5 converte código ES6 em vanilla ES5, fazendo com que você possa usar features de ES6 hoje mesmo.
O 6to5 possui algumas vantagens sobre outros transpilers, aqui estão algumas das principais features:
Readable: se possível, a formatação é mantida para que o seu código gerado seja o mais semelhante possível.
Extensible: uma grande variedade de plugins e suporte a Browsers.
Lossless: source map para que você possa depurar o código compilado com facilidade.
Compact: mapeia diretamente para equivalente código ES5, sem qualquer necessidade de um runtime.

Escrevendo módulos

Vamos começar a escrever módulos!
Nossa aplicação não vai fazer nada além de logs, mas a ideia principal aqui é fazer você entender como os módulos funcionam e como implementar módulos ES6 agora em suas aplicações.
Nossa app possui essa estrutura básica:

├── Gruntfile.js
├── package.json
└── src
    ├── app.js
    ├── modules
    │   ├── bar.js
    │   ├── baz.js
    │   └── foo.js
    └── sample
        └── index.html

app.js é o arquivo principal, e dentro do diretório modules nós vamos armazenar os nossos módulos.
Dê uma olhada no app.js:

import foo from "./modules/foo";
import bar from "./modules/bar";

console.log('From module foo >>> ', foo);
console.log('From module bar >>> ', bar);

É bem simples. O código acima faz exatamente o que parece.
Nós estamos importando o módulo foo e o módulo bar, e então estamos logando o conteúdo de cada um.
Para ser mais claro, vamos olhar cada módulo:

// foo
let foo = 'foo';

export default foo;
// bar
let bar = 'bar';

export default bar;

Em ambos os módulos, nós estamos apenas exportando as strings 'foo' e 'bar'.
Quando importamos o módulo, nossa variável passa a ter o valor que exportamos.
Então foo em import foo from "foo" possui o valor "foo" que exportamos em export default foo.
Você também pode exportar objetos, classes, funções, etc.
Agora, você pode começar a hackear este simples exemplo e escrever seus próprios módulos.

Build

Como você deve saber, módulos ES6 ainda não são suportados por nenhum browser e nem no node.
A única maneira de escrever módulos ES6 hoje é usando um transpiler.
Como mencionei antes, estamos usando o 6to5, que faz exatamente o que queremos.
O task runner escolhido foi o Grunt, e vamos utilizar o grunt-6to5, projeto do @sindresorhus.

npm install grunt-cli -g
npm install grunt --save-dev
npm install grunt-6to5 --save-dev

O nosso Gruntfile vai parecer com algo assim:

grunt.initConfig({
    '6to5': {
        options: {
            modules: 'common'
        },

        build: {
            files: [{
                expand: true,
                cwd: 'src/',
                src: ['**/*.js'],
                dest: 'dist/',
            }],
        }
    }
});

Uma configuração bem simples e estamos quase lá.
A task 6to5 roda o 6to5 no diretório src e faz o transpile do código para o diretório dist.
Note a opção modules: 'common'. Essa opção diz para o 6to5 fazer o transpile dos módulos para ES5, usando o estilo de módulos CommonJS.
O 6to5 também suporta AMD, o que é muito legal, porque podemos integrar os módulos ES6 no nosso ambiente atual, independente do nosso estilo de módulos legado/atual escolhido.

Para testar no browser, eu fiz uma copy task que apenas copia o arquivo sample/index.html para o diretório dist.
O arquivo HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 modules 6to5</title>
</head>
<body>
    <script src="//[cdnjs URL]/require.min.js"></script>
    <script>
        require(['app.js']);
    </script>
</body>
</html>

Olhe para o código acima, nós colocamos o RequireJS como a nossa biblioteca AMD e depois basta fazer um require da nossa app.
Para esse teste funcionar, você irá precisar alterar a opção modules: amd.

Running

Agora que estamos com tudo pronto, você pode apenas rodar o grunt.
Se você perdeu algo até aqui, você pode clonar esse repositório es6-modules-today-with-6to5 e rodar npm install.
Lembre-se, a task do Grunt vai gerar o diretório dist com o código transpilado.
Se você escolher usar CommonJS, você pode testar a app com o node:

node dist/app.js

Running with node

Se você optou por usar AMD, apenas sirva o diretório dist, e acesse a página index.html.
AMD ES6

Conclusão

Com este simples tutorial você pode ver como é fácil configurar um ambiente ES6 para trabalhar com módulos.
O 6to5 é uma excelente ferramente que você pode uasr hoje para transpilar código ES6 para ES5.
Forke o repositório es6-modules-today-with-6to5 e submeta issues, perguntas ou pull-requests.
Comentário são bem-vindos :)

icon comments

Comments

comments powered by Disqus