Vanilla Javascript - #41 Compatibilizando com Babel e Webpack II

Na aula de hoje finalizaremos a parte de compatibilização do código com a inserção do Babel neste contexto.

Configurando Babel

Para configurarmos o Babel seguiremos os seguintes passos:
1 - Acessar docs >> user guide e faremos a instalação pelo npm no nosso terminal:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/polyfill babel-loader

2 - Posteriormente acesse no site do Babel o menu setup >> cli. Nesse link eles indicam a criação do arquivo .babelrc - Crie esse arquivo e insira o código abaixo:

{
  "presets": ["@babel/preset-env"]
}

3 - Em seguida acesse no site o menu Setup >> Webpack. Dentro do arquivo webpack.config.js insira no fim o código desse link. O arquivo completo ficará assim:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
};

4 - Agora basta voltar no terminal e usar o código abaixo:

npm run build

A partir desse momento você pode reparar que o código já está funcionando no Internet Explorer.

Para complementar nosso teste, vamos criar mais uma classe. Criaremos o arquivo ClassBaby.js que será uma especialização da ClassPerson.

import ClassPerson from "./ClassPerson";

export default class ClassBaby extends ClassPerson{

    constructor()
    {
        super();
    }

    chorar()
    {
        return super.comer()+" e chorar";
    }
}

Como a ClassBaby está extendendo a ClassPerson, na nossa index.js podemos importar apenas ela, dessa forma:

import ClassBaby from "./ClassBaby";
let person=new ClassBaby;
alert(person.chorar());

Um último detalhe pra deixar seu código 100% é pegar o código criado no arquivo bundle.js e minificá-lo, ganhando assim em performance.

Por hoje é só. Sucesso nos códigos e na vida!