Como construir aplicativos modernos com o WEBPACK

Samuel Omole Blocked Desbloquear Seguir Seguindo 9 de janeiro

Até onde podemos chegar com a configuração padrão do Webpack?

Tive o privilégio de falar no GDG Devfest no mês passado com uma palestra centrada no uso do webpack em nossos aplicativos modernos. Você pode conferir os slides aqui .

Diariamente, eu consigo trabalhar como engenheiro e / ou consultor com equipes incríveis e rápidas, e o webpack parece ser o fator recorrente em todas essas equipes (usamos o ReactJs para a maioria das nossas aplicações). Inicialmente, minha palestra deveria se concentrar no uso de webpack com frameworks frontend / bibliotecas como ReactJS, Vue, Angular etc.

Antes de enviar minha proposta, decidi fazer uma mini pesquisa para saber o que as pessoas achavam do webpack. Para minha surpresa, muitas pessoas rotularam o webpack como “Somente usado com frameworks”, o que estava longe da verdade. Outros ainda disseram que “configurar o webpack era assustador”. Isso me levou a me concentrar mais no uso do webpack com o Vanilla JS e ver até onde poderíamos ir com a configuração padrão do webpack.

Mas primeiro:

O QUE É O WEBPACK?

Eu pessoalmente defino o webpack como uma ferramenta que pega muitos módulos Javascript e os mescla em um módulo Javascript que pode ser enviado para o navegador.

Eu sei, é uma simplificação do que o webpack faz, mas as pessoas parecem entender isso. Para explicar mais, o webpack é um bundler que procura por módulos Javascript com dependências (basicamente, arquivos Javascript que precisam de código de outros arquivos Javascript), os esmaga e produz um arquivo ou arquivos Javascript sem dependências. Dessa forma, eles podem ser facilmente enviados para o navegador.

História do Webpack

Para entender os problemas que o webpack tenta resolver, precisamos saber um pouco sobre a história do próprio webpack. Para manter esta seção muito curta, acabei de destacar duas ferramentas importantes e um conceito:

  • Google Web Toolkit : este é um framework do Google que converte Java para Javascript (eu sei, certo?). Ele tem um recurso que parece ser meu recurso favorito no webpack, que é "divisão de código". (Eu explicarei a divisão do código em um artigo subseqüente.)
  • Modules_Webmake : esta é a biblioteca da qual o webpack é originado. É essencialmente uma ferramenta que nos permite organizar nossos arquivos Javascript para o navegador da mesma forma que fazemos para o NodeJS (awesome).
  • IIFE: significa expressão de função imediatamente invocada. Esta é basicamente uma função Javascript que é chamada ou chamada ao mesmo tempo em que foi criada.

Expressão da Função Imediatamente Invocada

Eu quebrei isto em sua própria seção porque eu tive que explicar mais. Este é um exemplo de um IIFE:

Se fôssemos colocar essa função em nossa tag de script, isso seria executado imediatamente. A tag de script é carregada pelo navegador. É equivalente a anexar uma função a window.onload mas com uma vantagem adicional.

Devido à maneira como os closures funcionam em Javascript, todas as variáveis que foram declaradas no IIFE são escopo dentro dessa função. Isso significa que eu não teria problemas como conflitos de espaço de nomes na minha base de código, mas, ao mesmo tempo, ainda teria acesso às funções expostas pelo IIFE.

Por que o Webpack?

Então, quais são os problemas que enfrentamos hoje que o webpack nos ajuda a resolver?

Primeiro, temos o problema das tags de script. Eu trabalhei em uma base de código onde cada página HTML tem pelo menos 30 tags de script organizadas em uma ordem muito precisa. Eu sei que alguns podem dizer que não é realmente um problema, mas o navegador terá que fazer um pedido por arquivo que pode prejudicar o seu "tempo para carregar". Além disso, as tags de script podem ficar difíceis de gerenciar, onde reorganizar apenas uma pode quebrar o aplicativo (tentei isso ?).

Em segundo lugar, ainda temos a questão do namespace, em que o namespace global pode ficar confuso. Eu sei que somos pessoas muito criativas, especialmente quando se trata de nomear variáveis, mas quando você trabalha em uma equipe maior, há momentos em que os nomes das variáveis se chocam. Ou até mesmo o seu futuro pode pensar no mesmo nome novamente (sim, acontece).

Eu conheço algumas organizações que fazem com que seus desenvolvedores sempre mantenham suas variáveis dentro do escopo de suas funções, mas nem sempre podemos confiar nisso (ou this ). No final, isso apenas dificulta a separação de interesses.

Em terceiro lugar, lembre-se que mencionei esse webpack originado de modules_webmake. Como o webpack nos permite organizar nossos arquivos da mesma forma que fazemos no NodeJS (usando o CommonJS), temos o benefício adicional de escrever código modular que se adapta muito bem (basta perguntar às pessoas que usam frameworks frontend).

CommonJS

Não vou explicar muito sobre o CJS, pois este não é o ponto do artigo. Mas você pode dizer que é um sistema de módulos JS usado no NodeJS .

O Webpack nos permite usar este módulo e até mesmo o sistema do módulo ES "melhor" no navegador sem qualquer problema (o Webpack trata isso de maneira inteligente). Isso nos ajuda a escrever códigos realmente modulares e de fácil manutenção, nos quais um arquivo JS pode manipular uma única funcionalidade (Princípio de Responsabilidade Única).

Módulos ES (ESM)

Este é outro sistema de módulos que, acredite ou não, já está implementado pelos navegadores atuais. Mas infelizmente, tem suas limitações lá. O Webpack também nos permite usar este módulo sem nenhum problema (como o webpack ainda o converte no final), mas descobri que usar o ESM faz com que a maioria das bases de código em que trabalhei seja mais legível. Eu adoraria mergulhar mais fundo nisso, mas esse não é o objetivo deste artigo. Para uma melhor explicação, recomendo este artigo incrível.

Como o Webpack funciona?

Eu sei que eu disse anteriormente que o Webpack é mágico, mas eu menti. Para simplificar o mais possível:

  • O Webpack usa um caminho para um único ponto de entrada, que é um arquivo JS, e procura por instruções de importação (pode ser ESM ou CJS).
  • Em seguida, ele percorre o arquivo importado, também procurando mais instruções de importação, enquanto cria um gráfico de dependência no processo.

Para explicar melhor, dê uma olhada na imagem:

JK

Eu tenho dois arquivos lá, index.js e helpers.js Esses dois arquivos executam funções diferentes, mas estou importando e usando a função em helpers.js no meu arquivo index.js. Por padrão, o ponto de entrada do ./src/index.js é ./src/index.js e de lá ele tenta construir o gráfico de dependência como mostrado abaixo:

Como começar

Para entender melhor como o webpack funciona, vamos criar um aplicativo TODO simples. Ele terá apenas a funcionalidade básica de adicionar e excluir e vamos empacotá-lo usando a configuração padrão do Webpack (portanto, nenhum arquivo de configuração do webpack). É assim que o aplicativo será:

JK

O primeiro passo é criar um novo diretório de projeto e criar duas pastas, uma pasta chamada dist e outra chamada src . Por padrão, o ponto de entrada do Webpack é o caminho ./src/index.js e gera o JS agrupado em ./dist/main.js – é por isso que estamos criando as duas pastas.

Na pasta dist você pode criar o arquivo index.html . Isso não é necessário para o webpack, pois o arquivo pode ser colocado em qualquer lugar dentro do diretório do projeto e você pode apenas fazer referência ao arquivo main.js No final, a estrutura do seu projeto deve ficar assim:

Na pasta src , criaremos o arquivo index.html onde iniciaremos a implementação das funcionalidades do aplicativo TO-DO. Mas primeiro, vamos preencher o arquivo index.html . Como criar um aplicativo TO-DO não faz parte deste tutorial, apenas mostrarei o código abaixo:

 <html> 
<cabeça>
<title> Todo o aplicativo </ title>
</ head>
<body>
<div class = "container">
<p>
<label for = "new-task"> Adicionar item </ label>
<input id = "new-task" type = "text">
<button id = "addTask"> Adicionar </ button>
</ p>

<h3> Todo </ h3>
<ul id = "tarefas">
</ ul>
</ div>
<script src = "main.js"> </ script>
</ body>
</ html>

Vamos agora torná-lo funcional. Vamos dividir as duas funções (Add e Delete) em seus próprios arquivos e depois importá-las para o index.js . Vamos criar dois arquivos em nossa pasta src chamados addTask.js e deleteTask.js . Sua estrutura de projeto deve agora se parecer com isto:

Agora podemos começar a adicionar a lógica necessária, então vamos implementar o deleteTask.js primeiro porque ele não tem dependências. Cole isto no seu arquivo deleteTask.js :

 const deleteTask = função (e) { 
console.log ("Excluir tarefa ...", e);
// Remove o item da lista pai do ul
var listItem = e.target.parentNode;
var ul = listItem.parentNode;
 ul.removeChild (listItem); 
};
 export default deleteTask; 

Tudo o que está acontecendo nesse arquivo é que estamos criando a função deleteTask e, em seguida, exportando-a como uma exportação padrão.

Agora podemos implementar a função addTask . No arquivo addTask.js inclua o seguinte código:

 import deleteTask de "./deleteTask"; 
 const createNewTaskElement = function (taskString) { 
const listItem = document.createElement ("li");
const label = document.createElement ("label");
const deleteButton = document.createElement ("button");
 deleteButton.innerText = "Excluir"; 
deleteButton.className = "delete";
deleteButton.addEventListener ("click", deleteTask);
 label.innerText = taskString; 
 listItem.appendChild (label); 
listItem.appendChild (deleteButton);
 return listItem; 
};
 const addTask = function (e) { 
const taskList = document.getElementById ("tarefas");
tarefa const = document.getElementById ("new-task");
if (task.value! == "") {
const newTaskItem = createNewTaskElement (task.value);
taskList.appendChild (newTaskItem);
task.value = "";
}
};
 exportar padrão addTask; 

Neste, primeiro importamos o arquivo deleteTask.js . Por padrão, se nenhuma extensão for especificada na importação, o webpack assumirá automaticamente que é um arquivo .js . Em seguida, temos a função que cria o item da lista que contém a tarefa que foi inserida no formulário. A única coisa a notar é que estamos anexando a função delete ao manipulador de cliques do botão delete. Em seguida, criamos a função addTask e a exportamos.

Em seguida, precisaremos importar nossa função addTask para index.js . Cole o código abaixo em seu arquivo index.js :

 import addTask de './addTask'; 
 const addTaskButton = document.getElementById ("addTask"); 
addTaskButton.addEventListener ("click", addTask);

Isso é bastante simples: estamos importando a função addTask e anexando-a ao manipulador de addTaskButton do addTaskButton . Se você seguiu os passos acima, você deve ser bom para ir.

Finalmente, para obter nosso arquivo main.js , precisamos executar o Webpack através de nossa base de código. Para esta etapa, certifique-se de ter o NodeJS instalado em seu sistema e, em seguida, instalaremos o Webpack globalmente usando este comando:

 npm install -g webpack OU sudo npm install -g webpack 

Assim que estiver instalado, execute o seguinte comando:

 webpack 

Ele irá agrupar nosso arquivo com sucesso, mas devemos ver um aviso no terminal como este:

O Webpack está apenas nos avisando que não especificamos um modo . Podemos deixar como está e rodar o código, tudo deve funcionar bem. Mas se você não gosta do aviso, então você pode rodar o Webpack assim:

 webpack --mode = development 

E você é bom para ir.

Empacotando

Se você se perdeu ao longo do caminho você sempre pode usar o GitHub repo para referência (Tem algum estilo CSS nele, embora).

Espero que este artigo possa mostrar o que o Webpack tem a oferecer (apenas o básico, sem nenhuma configuração). Nos artigos subseqüentes, tentarei mostrar como configurar várias configurações personalizadas para recursos como divisão de código , carregamento lento e configuração do Webpack para trabalhar com aplicativos de várias páginas.

Para manter este artigo o mais básico possível, evitei o uso de um arquivo package.json no artigo. O uso de um arquivo package.json e a instalação do webpack localmente é a maneira mais escalável de usar o Webpack e eu o abordarei em meu próximo artigo sobre o uso do Webpack.

Para ajudar a navegar pelos próximos artigos, será realmente útil se você deixar um comentário sobre o que gostaria de ver explicado ou implementado sobre o Webpack. ??

Texto original em inglês.