🚀 Primeiros Passos

Parcel é um empacotador de aplicações web, diferenciado pela experiência do desenvolvedor. Ele oferece uma performance extremamente rápida utilizando processamento multicore, sem a necessidade de configuração.

Primeiro, instale o Parcel usando Yarn ou npm:

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

Crie o arquivo package.json no diretório do seu projeto executando:

yarn init -y

ou

npm init -y

Parcel pode receber qualquer tipo de arquivo como ponto de entrada, embora um arquivo HTML ou JavaScript seja a melhor opção para começar. Se você referenciar seu arquivo JavaScript principal dentro do seu arquivo HTML utilizando caminho relativo, o Parcel também processará esse arquivo para você e substituirá a referência no caminho do arquivo de saída.

Depois, crie os arquivos index.html e index.js.

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
console.log('Olá, mundo!')

Parcel possui um servidor de desenvolvimento embutido, o qual irá reconstruir sua aplicação automaticamente à medida que você vai alterando os arquivos. Ele suporta Hot Module Replacement para acelerar o desenvolvimento. Apenas aponte a ele seu arquivo de entrada:

parcel index.html

Agora, abra seu navegador em http://localhost:1234/. Você também pode alterar a porta padrão utilizando a opção -p <port number>.

Utilize o servidor de desenvolvimento caso você não tenha seu próprio sevidor, ou sua aplicação será inteiramente renderizada no cliente. Caso você possua seu próprio servidor, você pode utilizar o Parcel em modo watch. Essa opção continua reconstruindo sua aplicação à medida que você vai alterando os arquivos e suporta Hot Module Replacement, mas não irá iniciar um servidor.

parcel watch index.html

Mútiplos arquivos de entrada

No caso de você ter mais de um arquivo de entrada, vamos dizer index.html e about.html, você tem duas maneiras de executar o bundler:

Especificando os nomes dos arquivos:

parcel index.html about.html

Utilizando tokens e criando um glob:

parcel *.html

NOTA: No caso de você possuir uma estrutura de arquivos como esta:

- diretorio-1
-- index.html
- diretorio-2
-- index.html

Acessar http://localhost:1234/diretorio-1/ não irá funcionar, você terá que apontar explicitamente para o arquivo http://localhost:1234/diretorio-1/index.html.

Construindo para Produção

Quando você estiver pronto para enviar sua aplicação para produção, o modo build desativa a opção watch e constrói seus arquivos uma única vez. Veja a seção Produção para mais detalhes.

Ajude-nos a melhorar esta documentação

Se alguma coisa estiver faltando ou não estiver inteiramente clara, por favor crie uma issue no repositório deste site ou edite esta página.