Conhecendo o Parcel — Uma possível alternativa ao Webpack

Fazer o uso de um bundler se tornou algo praticamente indispensável na construção de aplicações web modernas.

Por ser capaz de fazer o empacotamento de diversos assets em poucos arquivos, gerenciar a árvore de dependências destes e até mesmo (com o auxílio de alguns plugins) ser capaz de compilar diferentes entradas em saídas legíveis para o browser, conhecer e utilizar tais ferramentas tornou se uma skill básica para desenvolvedores front-end.

Neste seguimento é possível encontrar diversas ferramentas capazes de cumprir com o desejado, porém é inegável que o Webpack é a mais popular entre as alternativas, tornando-se uma escolha quase fixa por grande parte dos desenvolvedores.

Estudando outros bundlers, conheci algumas ferramentas, mas percebi poucas diferenças entre elas e o Webpack que fossem significativas o suficiente para justificar seu uso, até que cheguei ao Parcel.

O Parcel é um bundler leve e versátil que oferece como seu maior diferencial a sua simplicidade de uso.

Sustentando a ideia de ser convention over configuration, o Parcel é capaz de acelerar direta e indiretamente a etapa de desenvolvimento por conta de alguns pontos.

• Tempo de compilação: O tempo de build é bastante rápido e supera a velocidade de alguns “concorrentes” (cof cof Webpack).
• Servidor embutido: O Parcel possui um servidor de desenvolvimento embutido que sobe a aplicação no mesmo comando em que a compilação é feita, tornando o processo ainda mais veloz.
• Arquivo de configuração(?): Por adotar uma ideia de ser um bundler opinativo, o Parcel não demanda nenhum arquivo de configuração para seu uso.
• Log de erros intuitivo: As mensagens de erro exibidas pelo Parcel durante os meus testes foram sempre um diferencial, onde ele geralmente demonstra exatamente o problema ou o módulo o qual ele precisa quando é o caso.

Beleza gostei, por onde começar?

A forma mais simples (e recomendada) de utilizá-lo, é fazendo sua instalação de forma global através do comando:

npm i -g parcel-bundler

Para ilustrar o processo de bundle e deploy do mini servidor, criei um repositório teste contendo um Hello World que utilizei em um dos meus testes da ferramenta, algo bem simples utilizando em conjunto o framework CSS Bulma e outra lib Javascript.

Para executar o exemplo precisaremos ter o Node (8+), Git e o Yarn previamente instalados.

Na linha de comando, importaremos a aplicação utilizando o comando:

git clone https://github.com/daniellucasss/parceltest.git

Entre na pasta recém criada:

cd parceltest

Utilize o comando abaixo para instalar as dependências da aplicação de teste:

yarn

Um ponto interessante a ressaltar é o fato de que o Parcel aceita mais de um tipo de arquivo como ponto de entrada do empacotamento, mas mesmo com essa versatilidade é recomendado utilizar os formatos .html ou .js.

Seguindo a recomendação, basta usar o comando:

parcel index.html

Ou usar do yarn script equivalente:

yarn start

Como descrito no console, o Parcel subiu a aplicação no endereço padrão ‘http://localhost:1234’ e já podemos ver o resultado através do browser.

Se checarmos a estrutura da aplicação de teste, percebemos que, neste caso, além das bibliotecas importadas foi necessário o uso do ‘node-sass’, algo indicado pelo próprio Parcel se tentarmos importar apenas a biblioteca do Bulma, também podemos reparar que o Parcel entende as dependências a serem anexadas através de simples referências no html e/ou importações no js.

Utilizando Parcel em conjunto a Libs/Frameworks JS:

No repositório dos criadores do Parcel, é possível encontrar exemplos de seu uso com Vue, React e Preact. Analisando os mesmos é percebemos que a simplicidade base permanece, se fazendo necessário apenas a utilização de um arquivo ‘.babelrc’ indicando o preset a ser utilizado na compilação, também não é difícil encontrar soluções para demais frameworks.

Conclusão:

Acredito que, enfim, temos uma alternativa válida ao Webpack. Alternativa essa de aprendizagem simples e intuitiva. Focada em agilizar o processo de desenvolvimento, durante meus testes a ferramenta sempre cumpriu bem com o prometido, mas por ser uma opção até então não muito difundida, sua escolha não seria recomendada no momento para aplicações de porte empresarial, por se tratar de um recurso ‘imaturo’ em questão de tempo e número de comunidade. Porém o Parcel vem sido bastante discutido por desenvolvedores em várias redes sociais e seu número de ‘stars’ no Github demonstra crescimento na comunidade que acompanha a ferramenta, recomendo que também mantenhamos nossos olhos na mesma que só tende a evoluir com o tempo.