Hoje em dia é muito comum, ao criar um projeto web, ter algum tipo de bundler para preparar os arquivos para o ambiente de desenvolvimento. Você pode utilizar o webpack ou rollupjs para realizar tarefas como transpilar o codigo em babel para ecmascript, criaçao de componentes com React. Essas ferramentas são extremamente populares e muito úteis. No entanto, existe outra maneira de fazer isso, com o ParcelJS.
O que é ParcelJS?
Empacotador de aplicações web ultra-rápido, sem configuração.
Quais os beneficios de usar o ParcelJS?
- Não precisa de configuração
- Possui hot loader
- Não depende de varios pacotes igual ( webpack )
- Realiza conversões automaticas
- Carrega assets
- Possui servidor embutido
Configurando ParcelJS com React 🚀🚀
Passo 1
mkdir parcel-react cd parcel-react npm init –y npm install -g parcel-bundler
Passo 2
npm install -D react babel-preset-react-app react-dom parcel-bundler
Passo 3
Criar um arquivo chamado .babelrc e dentro dele colocar o seguinte json
{
"presets": ["react-app"]
}
Passo 4
Criar um arquivo chamado index.html e dentro dele colocar o seguinte codigo
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React com ParcelJS</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Passo 5
Criar um arquivo chamado index.js e dentro dele colocar o seguinte codigo
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => <div>Hello world using ParcelJS + React</div>;
const RenderApp = () => ReactDOM.render(<App />, document.getElementById('root'));
RenderApp();
if (module.hot) {
module.hot.accept(RenderApp);
}
Passo 6
Inserir no package.json os seguintes scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html" // minify all files
},
Passo 7
npm start
Finalizando 📦😎
Acesse no navegador o servidor do parcel
Para quem deseja saber mais a fundo
Github: https://github.com/PaulaoDev
Linkedin: https://linkedin.com/in/paulo-sergio-27075414b/
Facebook: https://www.facebook.com/PauloRodriguesYT