Introdução
Neste artigo, irei explicar como usar a biblioteca/framework React através do Parcel.
O que é Parcel?
O Parcel é um module bundler que não precisa de configuração para seu funcionamento (diferentemente do webpack, por exemplo). E também, possui um tempo de empacotamento muito mais rápido, utilizando-se de um sistema de cache.
Instalações
Primeiramente, é necessário criar uma pasta e inicializar o NPM (ou o Yarn se preferir).
npm init -y
Depois, instale o Parcel e o React.
npm i -D parcel-bundler
npm i react react-dom
Logo após, instale também alguns presets do Babel.
npm i -D @babel/preset-env @babel/preset-react @babel/core
Se não for usar o Hooks e não quiser usar o bind nas classes da sua aplicação, é necessário instalar o seguinte plugin, como diz a documentação.
npm i -D @babel/plugin-proposal-class-properties
Caso queira usar async/await, instale os seguintes pacotes:
npm i --D @babel/plugin-transform-runtime
npm i @babel/runtime
Com isso, já é possível construir sua aplicação React.
Como usar
No package.json adicione na parte de scripts o diretório do arquivo de entrada, geralmente um html:
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
},
Para configurar o Babel, inclua também no package.json (se preferir, crie e utilize um arquivo próprio do Babel):
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}
E pronto, agora é só mandar "npm run dev" no seu prompt para rodar sua aplicação em modo de desenvolvedor ou "npm run build" para colocá-lo em modo de produção.
Conclusão
Deste modo, a utilização do React com o Parcel se torna uma boa alternativa para quem quiser ter um desenvolvimento muito rápido com um projeto mais leve e com mais controle, o que não ocorre com o create-react-app. Uma solução muito mais pesada, que se utiliza do webpack, e com diversos pacotes desnecessários que são instalados automaticamente.
Top comments (0)