BabelJS - Trabalhando com Babel e Webpack
Webpack é um empacotador de módulo que empacota todos os módulos com dependências - js, estilos, imagens, etc. em ativos estáticos .js, .css, .jpg, .png, etc. Webpack vem com predefinições que ajudam na compilação na forma necessária. Por exemplo, o preset react que ajuda a obter a saída final na forma react, es2015 ou env preset que ajuda a compilar o código em ES5 ou 6 ou 7, etc. Usamos o babel 6 na configuração do projeto. Caso você queira mudar para o babel7, instale os pacotes necessários do babel usando @ babel / babel-nome-do-pacote.
Aqui, discutiremos a configuração do projeto usando babel e webpack. Crie uma pasta chamada e abra a mesma no IDE do Visual Studio.
Para criar a configuração do projeto, execute npm initbabelwebpack da seguinte forma -
Aqui está o package.json criado após npm init -
Agora vamos instalar os pacotes necessários para trabalhar com o babel e o webpack.
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-envAqui está o Package.json após a instalação -
Agora, vamos criar um arquivo webpack.config.js, que terá todos os detalhes para empacotar os arquivos js. Esses arquivos serão compilados em es5 usando o babel.
Para executar o webpack usando o servidor, usamos o webpack-server. A seguir estão os detalhes adicionados a ele -
Adicionamos o comando publish que iniciará o webpack-dev-server e atualizará o caminho onde os arquivos finais são armazenados. No momento, o caminho que usaremos para atualizar os arquivos finais é a pasta / dev.
Para usar o webpack, precisamos executar o seguinte comando -
npm run publishPrimeiro, precisamos criar os arquivos webpack.config.js. Eles terão os detalhes de configuração para que o webpack funcione.
Os detalhes do arquivo são os seguintes -
var path = require('path');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
mode:'development',
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
}
};A estrutura do arquivo é a mostrada acima. Ele começa com o caminho, que fornece os detalhes do caminho atual.
var path = require('path'); //gives the current pathEm seguida está o objeto module.exports, que possui as propriedades de entrada, saída e módulo. A entrada é o ponto de partida. Aqui, precisamos fornecer os principais arquivos js que devem ser compilados.
entry: {
app: './src/main.js'
},path.resolve(_dirname, ‘src/main.js’) - procurará a pasta src no diretório e main.js nessa pasta.
Resultado
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},A saída é um objeto com detalhes de caminho e nome de arquivo. O caminho conterá a pasta na qual o arquivo compilado será mantido e nome do arquivo dirá o nome do arquivo final a ser usado em seu arquivo .html.
módulo
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
}Módulo é um objeto com detalhes das regras. Possui as seguintes propriedades -
- test
- include
- loader
- query
O teste conterá detalhes de todos os arquivos js que terminam com .js. Ele tem o padrão, que procurará .js no final do ponto de entrada fornecido.
Incluir instrui a pasta em uso nos arquivos a serem examinados.
Loader usa o babel-loader para compilar códigos.
A consulta tem predefinições de propriedade, que é uma matriz com o valor env - es5 ou es6 ou es7.
Crie a pasta src e main.js nela; escreva seu código js em ES6. Posteriormente, execute o comando para vê-lo sendo compilado para es5 usando webpack e babel.
src/main.js
let add = (a,b) => {
return a+b;
};
let c = add(10, 20);
console.log(c);Execute o comando -
npm run packO arquivo compilado é o seguinte -
dev/main_bundle.js
!function(e) {
var t = {};
function r(n) {
if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};
return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
}
r.m = e,r.c = t,r.d = function(e,t,n) {
r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
},
r.r = function(e) {
"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
},
r.t = function(e,t) {
if(1&t&&(e = r(e)),8&t)return e;
if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
var n = Object.create(null);
if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
return n
},
r.n = function(e) {
var t = e&&e.__esModule?function() {return e.default}:function() {return e};
return r.d(t,"a",t),t
},
r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},
r.p = "",r(r.s = 0)
}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);
!function(e) {
var t = {};
function r(n) {
if(t[n])return t[n].exports;
var o = t[n] = {i:n,l:!1,exports:{}};
return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
}
r.m = e,r.c = t,r.d = function(e,t,n) {
r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
},
r.r = function(e) {
"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
},
r.t = function(e,t) {
if(1&t&&(e=r(e)),
8&t)return e;
if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
var n = Object.create(null);
if(
r.r(n),
Object.defineProperty(n,"default",{enumerable:!0,value:e}),
2&t&&"string"!=typeof e
)
for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
return n
},
r.n = function(e) {
var t = e&&e.__esModule?function() {return e.default}:function() {return e};
return r.d(t,"a",t),t
},
r.o = function(e,t) {
return Object.prototype.hasOwnProperty.call(e,t)
},
r.p = "",r(r.s = 0)
}([function(e,t,r) {
"use strict";
var n = function(e,t) {return e+t}(10,20);
console.log(n)
}]);O código é compilado conforme mostrado acima. Webpack adiciona algum código que é necessário internamente e o código de main.js é visto no final. Consolamos o valor conforme mostrado acima.
Adicione o arquivo js final no arquivo .html da seguinte maneira -
<html>
<head></head>
<body>
<script type="text/javascript" src="dev/main_bundle.js"></script>
</body>
</html>Execute o comando -
npm run publish
Para verificar a saída, podemos abrir o arquivo em -
http://localhost:8080/
Obtemos o valor do console conforme mostrado acima. Agora vamos tentar compilar para um único arquivo usando webpack e babel.
Usaremos o webpack para agrupar vários arquivos js em um único arquivo. O Babel será usado para compilar o código es6 para es5.
Agora, temos 2 arquivos js na pasta src / - main.js e Person.js da seguinte forma -
person.js
export class Person {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}Usamos export para usar os detalhes da classe Person.
main.js
import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);Em main.js, importamos Person do caminho do arquivo.
Note- Não precisamos incluir person.js, mas apenas o nome do arquivo. Criamos um objeto da classe Person e consolamos os detalhes conforme mostrado acima.
Webpack irá combinar person.js e main.js e atualizar em dev/main_bundle.jscomo um arquivo. Execute o comandonpm run publish para verificar a saída no navegador -
