Vanilla Javascript - #40 Compatibilizando com Babel e Webpack
14/08/2019Durante o curso nós pudemos ver que a partir do EcmaScript 6 vários novos recursos foram lançados, mas os navegadores antigos não davam suporte. Nessa aula aprenderemos como tornar esse código compatível com Babel e Webpack.
Exemplificando o problema de compatibilidade
Para exemplificar o problema de compatibilidade vamos criar um projetinho simples e testar nos navegadores Chrome, Firefox, Edge e IE 11.
Vamos criar na raiz do projeto o arquivo index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Babel + Webpack</title>
</head>
<body>
<script src="js/dist/bundle.js"></script>
</body>
</html>Criaremos também, um diretório com o nome js que abrigará os arquivos do Javascript.
index.js
import ClassPerson from "./ClassPerson";
let person=new ClassPerson;
alert(person.andar());ClassPerson.js
export default class ClassPerson{
andar(){
return "A pessoa andou";
}
comer(){
return "A pessoa comeu";
}
}Basicamente no código acima, fizemos uma classe com dois métodos e demos um alerta chamando o método andar. A parte de classes foi implementada a partir do ES6. Vamos testar o código nos navegadores citados no início do tutorial.
Você pode reparar que em todos os navegadores, exceto o Internet Explorer 11, o alerta funcionou. Isso porque o IE 11 não dá suporte a classes. Vamos então compatibilizar a partir de agora o código com o Babel e Webpack.
Compatibilizando o código com Babel e Webpack
Pra fazer a compatibilização vamos precisar do NPM, logo vamos baixar o NodeJS que já traz isso pra nós.
Instalando o Webpack
Assim que intalar o NodeJS, acesse o terminal do seu sistema operacional. No Windows basta acessar iniciar >> cmd. Siga os comandos abaixo:
1 - Vá até o diretório raiz do seu projeto
cd c:/wamp64/www/js2 - Dê o comando de inicialização e preencha com os dados que quiser:
npm initVá até o site do Webpack, acesse Documentation >> Guides >> Getting Started
Volte ao terminal e rode os comandos:
npm install webpack --save-dev
npm install webpack-cli --save-devAcesse no mesmo site o link modules. Crie o arquivo webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
};Observe que no código acima, o output do nosso sistema está indo para a pasta dist e arquvio bundle.js. Crie o arquivo com esse nome na pasta dist.
Copie o script do Webpack e jogue dentro do arquivo package.json. Veja como ficou:
{
"name": "wef",
"version": "1.0.0",
"description": "wef babel e webpack",
"scripts": {
"build": "webpack --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}Volte ao terminal e rode o comando:
npm run buildSe você reparar agora o arquivo bundle.js já está carregado com todo o código compilado.
No nosso index.html mude o link do javascript. Assim:
<script src="js/dist/bundle.js"></script>Na próxima aula finalizamos implementando o Babel.
Sucesso nos códigos e na vida!!
Posts Relacionados
