Primeiras aulas do curso Webpack: Manipulando módulos na sua webapp

Webpack: Manipulando módulos na sua webapp

Introdução - Webpack, o agrupador de módulos

Olá, eu sou o Flávio Almeida. Seja bem-vindo ao curso de Webpack da Alura! Começaremos mostrando o projeto que é o ponto de partida da nossa trama.

Inicialmente vamos digitar o seguinte comando no Terminal para instalar o projeto.

client caelum$ npm run watch

Vamos entrar na pasta do projeto que faremos o download mais adiante. O projeto está usando o Babel para fazer a compilação dos arquivos para podermos escrever o código com um código JavaScript mais atual e conseguir fazer transcompilação para uma versão mais antiga. Desta forma, ele funcionará em diferentes navegadores.

Para acessar o arquivo, antes, precisaremos subir o servidor usando o seguinte comando:

server caelum$ npm start

Após subirmos o servidor, o projeto se tornará público no navegador e será disponibilizado no endereço localhost:3000.

cadastro de Negociações aberto no navegador

Nosso projeto é um sistema de bolsa de valores no qual podemos cadastrar ações e movimentações. Ao clicarmos no botão "Importar Negociações", ele importará as negociações do servidor.

dados importados para uma tabela

Porém, a aplicação não está funcionando corretamente. Nós apresentamos um servidor criado por mim, que disponibiliza a API e será ele o responsável por tornar a aplicação acessível no navegador. Em um projeto profissional, é preferível utilizar um servidor que nos torne mais produtivo em um ambiente de desenvolvimento. Se analisarmos o código, estamos usando os módulos do ECMAScript 2015 (ES 6). Para carregar os módulos, usaremos o SystemJS - um carregador universal de módulos que será útil, mas possui a característica de carregar primeiramente o arquivo app.js.

Após carregar este primeiro módulo, ele resolverá todas as suas dependências. Em seguida, ele fará o download de cada um dos demais módulos separadamente, ou seja, se trabalharmos com 300 módulos, teremos 300 requisições.

Levaremos em consideração outro ponto, os arquivos bootstrap-theme.css e bootstrap.css foram baixados manualmente do site do Bootstrap e salvos dentro da pasta css. Se estamos usando o NodeJS para subir o servidor e o Babel também usa o NodeJS, podemos utilizar o npm (Node package manager, o gerenciador de pacotes do Node) para gerenciar as bibliotecas Front-end.

Não há um distinção entre builds de produção, por exemplo, podemos querer unificar nossos arquivos ou trocar a urlda API - do ambiente de desenvolvimento para o de produção. A Webpack é uma ferramenta que nos ajudará a resolver todos esses problemas. Trata-se de module bundler que "empacota" módulos para carregá-los na aplicação. Ele é voltado para a criação de single pages application (SPA), sendo utilizado pelo Angular CLI, Vue CLI e Create React App.

É um pedaço de código recorrente nos frameworks famosos de SPA. Neste curso, aprenderemos o essencial de Webpack, veremos como ele funciona, sem utilizar um framework. Trabalharemos com o protótipo de uma SPA e consolidaremos o conhecimento na prática, desta forma, você se sentirá mais seguro sempre que for usar uma Webpack.

Acesse a primeira atividade desta aula, atenda os requisitos de infraestrutura e faça o download do projeto.

Até lá!

Introdução - Preparando o terreno para o Webpack

Vamos abrir o Terminal, acessaremos a pasta do desktop digitando os seguintes comando:

Caelums-iMac:~caelum$ cd Desktop/projeto-webpack/
Caelums-iMac:projeto-webpack caelum$ ls
client server

Vamos listarmos com ls, lembrando que temos a pasta client, na qual está o projeto, assim como a server do servidor disponibilizado para o projeto.

Em seguida, entraremos dentro da pasta client também com um comando no servidor:

npm run watch

Com npm run watch, rodaremos o compilador em tempo real do Babel. Depois, abriremos uma nova aba do Terminal e entraremos dentro da pasta server:

npm start

Com o npm start, subiremos o novo servidor. Vamos digitar o endereço localhost:3000 no navegador e acessaremos o projeto. Se clicarmos em "Importar Negociações", importaremos as negociações da API.

negociações exibidas na tabela

Para introduzirmos o Webpack, começaremos a preparar a nossa estrutura. Vamos abrir o editor de texto (recomendamos o Visual Studio Code e apagaremos a pasta app, que é o resultado da compilação de app-src, em que ficam armazenados os arquivos originais do projeto.

pasta app

Se você trabalha com ECMAScript ou React, vai encontrar uma pasta semelhante. Apagaremos a pasta app, porque a geração dos arquivos compilados pelo Babel será feita com o auxílio do Webpack mais adiante.

A seguir, acessaremos o index.html, abaixo da tag <div> com o id="negociacoes" encontraremos algumas tags <script> com o SystemJS:

<div id="negociacoes"></div>

<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script>
    System 
        .import('app/app.js')
        .catch(err => console.error(err)) 
</script>

Nós iremos remover o SystemJS e o comando que importa os módulos. O trecho será substituído pela tag <script> que importará o dist/bundle.js:

<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/bundle.js"></script>

No caminho, especificaremos a pasta dist. Você pode questionar a existência da pasta dist e do arquivo recém adicionado, mas eles serão gerados futuramente pelo Webpack. Estamos preparando as bases para a aplicação funcionar bem com o Webpack.

O próximo passo será parar o servidor no Terminal, com o comando "Control + C" e teremos o seguinte retorno:

server caelum$

Acabamos de parar o processo de compilação em tempo real. Em seguida, dentro da pasta client, acessaremos o arquivo package.json:

"author": "",
"license": "ISC",
"dependencies": {
    "reflect-metada": "^0.1.10",
    "systemjs": "^0.20.12"
},
"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1"
}

Em seguida, removeremos o systemjs e o babel-cli - a ferramenta de linha de comando que permite trabalharmos com o Babel. Nós não trabalharemos com essa ferramenta. Quem vai ser responsável por chamar o Babel e compilar o código, será o Webpack. Realizaremos a remoção de maneira elegante, por meio do Terminal, usando o comando a seguir:

client caelum$ npm uninstall babel-cli --save-dev

Removemos primeiro o babel-cli que está dentro de devDependencies. se retornarmos ao package.json, veremos que ele foi removido.

"devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1"
}

Em seguida, vamos apagar o systemjs que está dentro de dependencies. De volta ao Terminal, digitaremos:

client caelum$ npm uninstall systemjs --save

Por enquanto, estamos apenas adaptando o projeto para trabalharmos com o Webpack. Se você usa o Angular CLI, react create app, Vue CLI, esses detalhes ficaram escondidos, neste curso, nós aprenderemos a essência do Webpack para entender cada um dos frameworks que o utilizam e nos sentirmos mais seguros. Por isso, começaremos por baixo.

Após as duas remoções, o próximo passo será instalar o Webpack. No caso, usaremos a versão 3.1.0, cuja homologação foi feita por mim. Não use versões anteriores, porque elas possuem bugs. Instalaremos também babel-core.

client caelum$ npm install webpack@3.1.0 babel-core@6.25.0 --save-dev

Nós desinstalamos o babel-cli e estamos este outro porque o Babel ainda será usado para a compilação dos arquivos. Nós vamos instalar o core, na versão 6.25.0 do Babel, que será chamado pelo Webpack para automatizar o processo. No Terminal, digitamos o --save-dev, por se tratar de uma dependêcia de desenvolvimento. Usaríamos apenas --save por ser uma dependência em tempo de produção.

Será feito rapidamente o download, em seguida, se acessarmos o arquivo package.json, veremos que o babel-core e o webpack foram instalados corretamente.

"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "webpack": "^3.1.0"
} 

Temos o projeto, que não possui carregador de módulo, ou seja, sem o systemjs. Também não temos arquivos compilados, é o momento de configurar o Webpack para construir e empacotar os módulos da aplicação.

Introdução - O temível webpack.config.js

Faremos a primeira configuração do Webpack, na qual indicaremos qual módulo será carregado primeiramente pela aplicação. Desta forma, o Webpack conseguirá ver todas as dependências do módulo e assim, ele construirá o bundle, que é o arquivo final com todos os módulos da aplicação. No caso, o módulo que será carregado primeiramente é o app.js.

Frameworks como AngularJS, React ou VueJs possuem um módulo de aplicação que será carregado antes dos demais. Depois, com a ajuda do Webpack, serão desenvolvidas as dependências do módulo.

A seguir, dentro da pasta client, criaremos o arquivo webpack.config.js.

novo arquivo criado

Se estamos criando um módulo no NodeJS, devemos adicionar a seguinte linha de código dentro webpack.config.js:

module.exports = {
    entry: './app-src/app.js',
}  

Configuramos o módulo, que no caso, foi feito em um objeto. Nele, passamos o entry - o ponto de entrada - e especificamos qual será o primeiro módulo carregado. Definiremos ainda onde será gravado o bundle do final, que será resolvido no módulo inicial. Lembrando que o Webpack vai procurar todas as dependências e resolverá isso por nós, gerando um grande arquivo no fim. Isso será feito em output, que receberá o objeto filename: 'bundle.js'.

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
   }
}

Além disso, passaremos o path dentro do objeto, mas antes, criaremos a constante path com o caminho absoluto:

const path = require('path');

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}      

Agora, no path do output, definiremos que ele é o resultado de path.resolve. Ele receberá a variável do NodeJS, chamada __dirname, que informa qual a diretório do webpack.config. Em seguida, queremos concatenar a pasta dist, adicionada como segundo parâmetro do resolve(). Então o path.resolve() criará o caminho completo até a pasta dist, com base na pasta client.

Recapitulando: Se analisarmos o index.html, em que especificamos que o carregamento deve ser feito desde dist/bundle.js, com isso o bundle.js será criado dentro da pasta dist - localizada dentro de client, conforme especificamos no webpack.config.js.

Configuramos uma entrada e uma saída, agora, precisaremos encontrar um forma de executar o script. Para isto, faremos novos ajustes no package.json.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --config webpack.config.js"
},

O próximo passo será apagar o build e o watch, porque não estamos mais usando o Babel CLI, logo, não serão utilizados. Em seguida, adicionaremos o script build-dev, que é um build de desenvolvimento. Ele será responsável por chamar o webpack --config webpack.config.js. Se chamarmos o script build-dev do package.json, será executado o binário do webpack passando como configuração o arquivo webpack.config.js.

Voltaremos para o Terminal, digitaremos o seguinte comando:

client caelum$ ls

Será exibida uma lista com todos os arquivos da pasta client.

Caelums-iMac:client caelum$ ls
README.md           index.html          package.json 
app-src             jsconfig.json       webpack.config.js
css                 node_modules
db.html             package-lock.json

Ainda na pasta client vamos usar o seguinte comando npm:

Caelums-iMac:client caelum$ npm run build-dev

> client@1.0.0 build-dev /Users/caelum/Desktop/projeto-webpack/client
> webpack --config webpack.config.js

Em seguida executaremos o comando e o Webpack não processará o arquivo, como veremos na mensagem exibida logo após no Terminal You may need an appropriate loader to handle this file (Em tradução livre: Você vai precisar de um loader apropriado para lidar com este arquivo):

ERROR in ./app-src/controllers/NegociacaoController.js
Module parse failed: /Users/flavioalmeida/Desktop/20/client/app-src/controllers/NegociacaoController.js Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| import { getNegociacaoDao, Bind, debounce, controller, bindEvent } from '../util/index.js';
| 
| @controller('#data', '#quantidade', '#valor')
| export class NegociacaoController {
| 
 @ ./app-src/app.js 1:0-77

No caso, o arquivo será @controller. O problema é que este projeto está utilizando os decorators existentes no Typescript, mas que podemos utilizar no JavaScript porque estamos rodando com Babel.

Porém, como o Webpack não entende que estamos utilizando a sintaxe do Babel, ele deixa de funcionar. Para que isso não aconteça, precisamos configurar no Webpack o Babel, para processar o arquivo antes de o Webpack tentar criar e processar os módulos.

Sobre o curso Webpack: Manipulando módulos na sua webapp

O curso Webpack: Manipulando módulos na sua webapp possui 129 minutos de vídeos, em um total de 62 atividades. Gostou? Conheça nossos outros cursos de Automação e Performance em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Automação e Performance acessando integralmente esse e outros cursos, comece hoje!

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana