#2 - Primeiros passos com Parcel

Com uma configuração tão simples, você ganha liberdade ao poder importar um arquivo Sass ao invés de um CSS, ou um script TypeScript ao invés de um JS diretamente em seu HTML

Arthur V. M. Dantas

Nov 12, 2021 • 1 min read

Há algumas semanas, decidi trabalhar em um exercício de front-end com apenas um HTML estático (e SASS e JavaScript). Apesar dessa simplicidade, eu queria ter alguns benefícios como um servidor de desenvolvimento, hot-reloading e o Autoprefixer(1).

Meu primeiro impulso foi usar o Webpack(2). Era a minha primeira configurando-o na "unha" então comecei a ler a documentação. Não demorou muito para eu sentir que estava lendo demais para alcançar algo "simples". Isso me fez procurar por alternativas.

Um nome nome me veio à cabeça: Parcel(3). Eu havia dado uma rápida olhada em seu site antes e voltei lá para ver se ele poderia me ajudar. Fico feliz em dizer que ele foi perfeito.

Os desenvolvedores do Parcel o chamam de "zero-configuration build tool". E quase foi isso mesmo para mim.

Depois de instalá-lo com npm install --save-dev parcel, tive que adicionar uma configuração de entrada no arquivo package.json (e nos scripts por conveniência):

// package.json
{
  ...
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
  ...
}

Depois disso, ao rodar npm start, tinha um servidor de desenvolvimento com hot-reloading. Por padrão, Parcel realiza o build para o diretório dist.

Para ter o Autoprefixer, criei um arquivo .postcssrc na raiz do projeto com o seguinte conteúdo:

// .postcssrc
{
    "plugins": {
        "autoprefixer": {}
    }
}

E, para finalizar, adicionei o seguinte para o arquivo package.json (Autoprefixer utiliza o Browserslist(4)):

"browserslist": "> 0.5%, last 2 versions, not dead",

E é isso. Incrível, não? Não foi preciso instalar nenhum pacote além do Parcel.

Com uma configuração tão simples, você ganha liberdade ao poder importar um arquivo Sass ao invés de um CSS, ou um script TypeScript ao invés de um JS diretamente em seu HTML.

<link rel="stylesheet" href="styles.scss" />
<script src="formValidation.ts" defer></script>

Parcel vai tomar conta de tudo. 🙂

Links