Parcel é meu construtor de projetos favorito

Hoje falaremos sobre criadores de projetos (empacotadores), ferramentas que facilitam a vida dos desenvolvedores. A essência do trabalho dos empacotadores é que eles pegam o código JavaScript contido em muitos arquivos e o empacotam em um ou mais arquivos, ordenando e preparando-os para o trabalho nos navegadores de uma certa maneira. Além disso, graças a vários plug-ins (plug-ins) e carregadores, o código pode ser reduzido, outros recursos (como arquivos e imagens CSS) podem ser empacotados, além do código. Os empacotadores permitem que você use pré-processadores; eles podem dividir o código em fragmentos carregados quando necessário. Mas suas capacidades não se limitam a isso. De fato, estamos falando sobre o fato de que eles ajudam a organizar o processo de desenvolvimento.



Existem muitos empacotadores. Por exemplo - Browserify e webpack . Embora esses construtores de projetos sejam ótimas ferramentas, eu pessoalmente os achei difíceis de configurar. Por onde começar a instalação? Esta pergunta é especialmente relevante para iniciantes, para aqueles que podem estar um pouco assustados com algo como um "arquivo de configuração".

É por isso que eu costumo usar o construtor de projetos Parcel . Encontrei este empacotador por acidente quando assisti a um vídeo de treinamento no YouTube. Havia dicas para acelerar o desenvolvimento. O ambiente de trabalho mostrado neste vídeo estava fortemente vinculado ao Parcel. Depois disso, decidi que deveria tentar esse empacotador.

Recursos do pacote

O que eu mais gosto no Parcel é que ele não requer nenhuma configuração. É isso mesmo: você não precisa configurá-lo. Nesse sentido, o Parcel supera o webpack , onde as configurações podem ser espalhadas por vários arquivos e representam "folhas" de código inteiras. O desenvolvedor, configurando o webpack, pode ter retirado algo dos arquivos de configuração de outros programadores. É possível que as configurações sejam simplesmente copiadas inteiramente de outros projetos. É claro que a complexidade da configuração depende do desenvolvedor, mas mesmo ao configurar o webpack para um projeto pequeno, você precisa usar um determinado conjunto de plug-ins e instalar determinadas opções.

É por isso que o uso de Parcel me parece um golpe. Por exemplo, se um desenvolvedor planeja estilizar seu projeto usando SCSS ou LESS, ele pode, sem movimentos desnecessários, simplesmente escrever o código apropriado. Deseja usar os recursos mais recentes do JavaScript? Nesse caso, você pode, sem pensar em nada, escrever código usando esses recursos. Precisa de um servidor para desenvolvimento? Quem usa o Parcel possui um servidor desse tipo. De fato, aqui apenas tocamos a ponta do iceberg das vastas capacidades do Parcel.

O pacote permite que o programador, sem perder tempo com nada secundário, simplesmente tome e comece a trabalhar no projeto. Essa é a principal vantagem de usá-lo como empacotador. Além disso, o pacote processa arquivos e cria projetos muito rapidamente, usando os recursos de processadores com vários núcleos, enquanto outros empacotadores, incluindo webpack, realizando transformações de código mais lentas e complexas, trabalham mais lentamente.

Escopo de uso do Parcel

O pacote, como qualquer outra ferramenta, não é uma ferramenta universal, igualmente aplicável sempre e em qualquer lugar. Mas há situações em que Parcel é particularmente bem-sucedido.

Eu já falei sobre a rapidez com que o Parcel permite que você entre em um projeto em funcionamento. Graças a isso, é ideal para trabalhar em prazos apertados e para criar protótipos. Estamos falando de situações em que o tempo é caro e quando o objetivo dos desenvolvedores é criar um aplicativo funcional o mais rápido possível.

Isso não significa que o Parcel não seja adequado para aplicativos complexos ou para projetos nos quais grandes equipes de programadores participam. O pacote tem bom desempenho em tais condições. No entanto, percebi que projetos de grande escala podem se beneficiar do ajuste manual dos fluxos de trabalho.

Comparar um empacotador que não precisa de configurações com um empacotador que precisa ser configurado é como comparar carros com uma transmissão automática e manual. Às vezes, o driver pode precisar controlar mais detalhes e, às vezes, menos.

Eu estava trabalhando em um site de várias páginas, nas profundezas das quais havia muito código JavaScript. Pacote teve um bom desempenho neste projeto. Ele me deu um servidor, ele compilou o Sass em CSS, adicionou prefixos de fabricantes de navegadores ao código, se necessário, e permitiu, sem nenhuma configuração, usar comandos de exportação e importação em arquivos JavaScript. Tudo isso facilitou muito meu trabalho no projeto.

Criando um site simples usando o Parcel

Vamos organizar um test drive de encomendas. Isso nos permitirá ver que a criação de algo com esse empacotador é relativamente simples. Aqui está a página na qual trabalharemos.


Página do Projeto Piloto

Vamos criar um site simples que usará Sass e um pouco de JavaScript. Exibiremos informações sobre o dia atual da semana e uma imagem aleatória baixada da Unsplash Source na página do site.

▍ Estrutura básica do projeto

O projeto, planejado para usar o Parcel, não precisa de uma estrutura especial de arquivos e pastas. Não precisa usar uma certa estrutura. A estrutura básica do projeto consistirá em três arquivos cujos nomes falam por si. Estes são index.html , style.scss e index.js . Você pode criá-los da maneira que quiser. Por exemplo, usando a linha de comando:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

Adicione um pequeno código de modelo e marcação ao arquivo index.html no qual a funcionalidade do projeto se baseará:

 <!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">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

Você deve ter notado que aqui faço o download da fonte da Web ( Lato ) do Google Fonts. O uso de fontes para download é voluntário. Aqui, vale a pena prestar atenção na conexão de arquivos CSS e JavaScript e no código HTML do corpo do documento, que fornece um local para a saída de informações sobre o dia da semana e um local para a saída de uma imagem aleatória do Unsplash. Na verdade, neste trabalho, a estrutura básica do projeto está concluída.

Milagre da preparação rápida do Parcel para trabalhar

Agora, antes de prosseguir com o estilo e o script, vamos tentar executar nosso projeto usando o Parcel. Não há nada incomum em instalar o Parcel:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

Agora inicialize o projeto usando npm ou yarn, o que levará à criação do arquivo package.json :

 npm init -y #  yarn init -y 

Isso é tudo! Nenhuma configuração adicional precisa ser feita. Tudo o que resta a fazer é informar ao Parcel sobre qual arquivo é o ponto de entrada do projeto. Isso permitirá que o bundler descubra o que seu servidor precisa oferecer aos clientes.

No nosso caso, esse arquivo seria index.html :

 parcel index.html 

Depois que o servidor iniciar com êxito, o seguinte será exibido no console:

 Server running at http://localhost:1234 √ Built in 13ms. 

O servidor Parcel suporta uma inicialização a quente. O empacotador reconstrói o aplicativo sempre que as alterações feitas nos arquivos do projeto são salvas.

Vamos voltar para a pasta do projeto. Aqui você pode ver as novas pastas e arquivos criados pelo bundler.


Novas pastas e arquivos criados pelo bundler

Estamos particularmente interessados ​​na pasta dist . Ele contém todo o código compilado, incluindo mapas de código para CSS e JavaScript.

▍ Continuação dos trabalhos no projeto

Vamos style.scss arquivo style.scss e nos familiarizarmos com a forma como o Parcel processa o código Sass. Criei aqui várias variáveis ​​usadas para armazenar as cores e a largura do contêiner no qual o conteúdo da página é colocado:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

Agora, no mesmo arquivo, adicione descrições de estilo. Aqui você pode criar o que quiser. Por exemplo, eu fiz isso:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

Assim que esse arquivo é salvo, o Parcel começa a trabalhar, compila tudo e recarrega a página no navegador. Não precisamos fazer nada além de salvar o arquivo. A parcela, por padrão, monitora as alterações no arquivo.

Aqui está a aparência da página após o estilo.


Página estilizada

Resta apenas exibir aqui o nome do dia atual da semana. No decorrer da solução desse problema, usaremos as equipes de importação e exportação . Isso testará a capacidade do Parcel de trabalhar com mecanismos modernos de JavaScript.

Crie um arquivo today.js e exporte-o para uma função que retorne, usando uma matriz com os nomes dos dias da semana, o nome do dia atual:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

Observe que a função getDay primeiro dia da semana.

Exportamos a função today.js de getDay . Agora vamos ao arquivo index.js e importe esta função para ele a partir do arquivo today.js . Isso fará com que o arquivo today.js seja processado durante a montagem do projeto.

 import { getDay } from './today'; 

O pacote, sem nenhuma configuração adicional, suporta a sintaxe dos módulos ES6 , para que possamos usar os comandos de importação e exportação nos arquivos JS.

Agora basta selecionar o elemento <span> correspondente e passar o valor retornado pela função getDay . Adicione o seguinte código ao index.html :

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

Após salvar o arquivo, o projeto será reconstruído, sua página no navegador será alterada.


Projeto finalizado

UildConstruindo um projeto para produção

Criamos o aplicativo e agora queremos colocá-lo em algum lugar. Pode ser nosso próprio servidor, ou algo como Surge ou Now , que torna a publicação de projetos da Web o mais simples possível. Ao mesmo tempo, precisamos que o código do projeto seja compilado e minificado.

Para trazer o projeto para um formulário adequado para publicação, precisamos apenas de um único comando:

 parcel build index.html 

Depois de executar este comando, o console obterá algo semelhante ao mostrado na figura a seguir.


Montagem do projeto

Agora, temos à disposição os recursos do aplicativo, prontos para implementá-lo na produção. Aqui, você pode ler os detalhes de como o Parcel coleta versões de produção dos projetos e encontrar algumas dicas que melhorarão a eficiência do trabalho com esse empacotador.

Sumário

Eu já disse isso várias vezes, mas vou repetir novamente: o pacote é uma ótima ferramenta. Ele permite coletar projetos, compilar código, fornecer ao servidor de desenvolvimento um programador, pré-processar e pós-processar recursos, reduz o código. E suas habilidades não se limitam a isso. Aqui examinamos provavelmente um exemplo extremamente simples, mas espero que isso tenha permitido que você sinta os recursos do Parcel e tenha ajudado a aprender como usar esse empacotador em seus projetos.

Caros leitores! Qual bundler você usa?