É por ocasião do último Encontro JS-Star, organizado pela JS-Republic, que pudemos revisar os principais empacotadores JavaScript do momento e suas funcionalidades. É hora de fazer um balanço dessas pequenas ferramentas que facilitam muito a vida!

O tema desta noite foi o gerenciamento de dependências de JavaScript em 2016, um conceito intrinsecamente ligado aos empacotadores de JavaScript. A primeira pergunta que vem então, o que é um empacotador e o que ele traz em comparação com um Gulp ou um Grunt?
Com um Gulp ou um Grunt, muitas vezes você precisa especificar a ordem em que deseja processar seus ativos de entrada. Por exemplo, você deve especificá-lo uma vez para concatenar os arquivos js, outra vez para executar seus testes e assim por diante…
Embora, em última análise, gostaríamos de poder dizer que um arquivo A depende de um arquivo B (como Node.js) e que, fornecendo apenas o arquivo “raiz”, nossas ferramentas são inteligentes o suficiente para concatenar, baixar as dependências ou simplesmente executar Os testes.
E essa é a missão cumprida por ferramentas como Webpack, JSPM ou Rollup.js que tivemos o direito de (re-)descobrir em três apresentações top!

As diferentes formas de embalagem e Webpack

Antônio, o Táxi (@MóduloM) introduz o assunto explicando em detalhes as diferentes formas de empacotamento JavaScript (veja o vídeo abaixo). Ele nos conta sobre a história de Globals e IIFE (Immediately-invoked function expression), depois de CommonJs, o formato Node.js, de AMD inicialmente lançado por Require.js, UMD a tentativa de conciliar os dois anteriores, e finalmente de o futuro com os módulos ES2015.
Neste mesmo vídeo você encontrará Anthony Giniers (@aginiers) nos dão uma explicação mais do que bem-vinda para muitos de nós sobre a configuração enigmática de Webpack !

JSPM

JSPM não ficou de fora durante esta noite graças a Jordane Garnet (@JoGrenatGenericName). Misturando habilmente a apresentação prática e acadêmica, ele conseguiu nos apresentar essa ferramenta que se beneficiaria de ser conhecida. Assistir !

RollupJS

Finalmente a noite encerrou com a apresentação de RollupJS por Mathieu Breton (@MatBreton). Esta ferramenta pouco conhecida pretende ser um projeto experimental para promover o uso de módulos ES6. Este formato, que será o futuro formato de pacote JavaScript no futuro, ainda é pouco utilizado, a exemplo dos arquivos “principais” apontados pelas bibliotecas Node.js que estão sempre no formato UMD.

Conclusão

Além dos vários formatos de embalagem JS, duas palavras também surgiram continuamente durante esta noite: árvore tremendo
Por trás deste termo esconde-se o processo de remoção de código morto (código não utilizado) nas dependências do JavaScript. O resultado é uma redução potencialmente muito significativa na entrega de saída.
Como exemplo, um JavaScript usando D3.js e que originalmente faz mais do que 58ko minified e gzipped podem atualizar para 8ko com este processo. (fonte)
Você encontrará dois pedaços de código que permitirão que você entenda melhor o conceito. E avisamos em março para o próximo encontro JS-Star 😉

//-------------
// main.js
import {cube} from './maths.js';
console.log( cube( 5 ) ); // 125
//-------------
// maths.js
export function square ( x ) {
   return x * x;
}
// This function gets included
export function cube ( x ) {
   return x * x * x;
}

function cube ( x ) {
   return x * x * x;
}
console.log( cube( 5 ) ); // 125