Parcel Bundler
Neste artigo, mostrarei um pouco sobre um novo bundler chamado Parcel. Ele traz consigo algumas características interessantes que podem nos ajudar e ser uma alternativa ao mais famoso bundler que conhecemos, o Webpack.
Uma das mais interessantes features dele é você, realmente, não precisar de nenhuma configuração para empacotar o seu projeto. Essa possibilidade traz força como uma alternativa ao uso do webpack, pois como todos sabem, o webpack traz a necessidade de uma grande variedade de configurações e, dependendo do conhecimento do desenvolvedor, pode parecer muito verboso e complexo.
🚀 Fast
Algo que também impressiona é a velocidade em que ele consegue fazer o build da aplicação. Um resultado de benchmark - fornecido pelo próprio site oficial do Parcel - mostra esse poder comparado ao browserify e webpack. Os números impressionam e, com cache, a velocidade é ainda maior. A aplicação neste exemplo continha 1726 módulos.
| Bundler | Time | | browserify | 22.98s | | webpack | 20.71s | | parcel | 9.98s | | parcel - with cache | 2.64s | 📦 Assets Parcel já está preparado para JS, CSS e HTML sem nenhuma necessidade de configuração de loaders. É utilizado Babel, PostCSS e PostHTML para tais transformações. ✂ Import Você precisa apenas mencionar seu ponto de entrada, e o Parcel irá realizar o restante do trabalho, verificando os arquivos que foram importados e irá realizar o bundle sem nenhuma configuração. 🔥 Hot module replacement Com webpack, temos que utilizar webpack-dev-server ou realizar uma configuração de hot module replacement para podermos ter em tempo real a renderização de nossas modificações - isso é muito importante em modo de desenvolvimento. Parcel já vem com isso pronto para uso, sem nenhuma configuração. ✂ Code Splitting Parcel também da suporte ao Code Splitting com zero de configuração. Isso permite que você splite o código da sua aplicação em diferentes bundlers, que serão carregados por demanda. Em que tipo de projeto devo utilizar? Qualquer projeto poderá utilizar Parcel, mas na minha opinião, eu utilizaria somente em projetos pequenos e que não tenham a tendência de escalarem; em projetos nos quais você necessite de agilidade e menos complexidade. Parcel é muito fácil de ser utilizado, nenhum plugin envolvido, nenhum loader para ser configurado. Você pode começar a qualquer hora. Então, webpack morreu? Não! Todos sabemos que o cenário de Javascript muda muito rápido, mas acredito que webpack ainda seja a melhor opção, sendo uma ferramenta muito poderosa, ele não morrerá tão cedo. Vamos ao Código! Iremos iniciar uma pequena arquitetura utilizando React, mas você poderia utilizar com qualquer lib, Vue, Angular, preact e etc... Imaginando que você já tenha node instalado e um gerenciador de pacotes de sua preferência (npm/yarn), iremos iniciar um projeto e instalar algumas dependências. Primeiro, crie uma pasta chamada parcel-react e, depois, acesse a mesma para iniciar o projeto. mkdir parcel-react && cd parcel-react Inicialize o projeto: yarn init -y Feita a inicialização, agora iremos instalar algumas dependências. devDependencies: yarn add --dev parcel-bundler babel-preset-env babel-preset-react babel-preset-env: Necessário para transformar códigos ES6+ para ES5. Use preset-env, presets como es2015, es2016, es2017 e latest já estão depreciados. babel-preset-react: A função principal desse preset é transfomar a syntax JSX para javascript. parcel-bundler: Esta é a mais importante dependência aqui, o nosso bundler. dependencies: Por fim, iremos instalar o React. yarn add react react-dom Diferente de webpack, no Parcel não precisa mencionar um loader. Será necessário que faça apenas a configuração do babel, criando um arquivo na pasta raiz, chamado .babelrc { "presets": ["env", "react"] } Agora, crie uma pasta src para escrever os pontos de entrada. Dentro desta pasta, crie index.jsx e index.html parcel-preact |--src |--index.jsx |--index.html // index.jsx import React from 'react' import { render } from 'react-dom' const App = () => <h1>Parcel Bundler with React</h1> render( <App/>, document.getElementById('root') ) <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Parcel Bundler with React</title> </head> <body> <div id="root"></div> <script src="index.jsx"></script> </body> </html> Acredito que agora temos o básico da estrutura e podemos criar nossos scripts em package.json "scripts": { "start": "parcel src/index.html -d dev", "build": "parcel build src/index.html" } Os scripts informam os pontos de entrada que, no nosso caso, é index.html que, por sua vez, importa o index.jsx Desenvolvimento: start Informamos um output que, neste caso, é a pasta dev. Produção: build Aqui, temos que setar build para o modo de produção. Para build não precisamos mencionar um folder de saída, pois a pasta dist já é definida por padrão como saída. Build retira o modo watch, hmr e realiza a minificação dos arquivos utilizando uglify-es para JavaScript, cssnano para CSS, e htmlnano para HTML. Cache: já é setado por padrão e, caso você queira desabilitar, deve passar a opção --no-cache no seu script. Minificação: em produção a minificação também vem habilitada. Caso queira desabilitar, passe a --no-minify no script. Caso você esteja versionando este projeto, o ideal é você adicionar um gitignore e também as pastas dist, dev e .cache Tanto em dev quanto em produção, o bundle é criado com um hash, sendo inserido automaticamente em seu index.html. Algo deste tipo: <script src=”/dev/907ba8e6319c1d4461add8815b07d62d.js”></script> Startar o projeto Agora, já temos nosso projeto pronto para ser executado. yarn start E pronto, server estará rodando em http://localhost:1234. Caso queira, você pode alterar a porta utilizada passando a config -p 8080 em seu script. Boilerplate Estou disponibilizando um pequeno boilerplate para quem tiver curiosidade e queira iniciar um projeto utilizando Parcel com React.