BabelJS - Trabajar con Babel y Webpack
Webpack es un paquete de módulos que empaqueta todos los módulos con dependencias - js, estilos, imágenes, etc. en activos estáticos .js, .css, .jpg, .png, etc. Webpack viene con ajustes preestablecidos que ayudan a la compilación en la forma requerida. Por ejemplo, react preset que ayuda a obtener la salida final en forma de reacción, es2015 o env preset que ayuda a compilar el código en ES5 o 6 o 7, etc. Hemos utilizado babel 6 en la configuración del proyecto. En caso de que desee cambiar a babel7, instale los paquetes necesarios de babel usando @ babel / babel-package-name.
Aquí, discutiremos la configuración del proyecto usando babel y webpack. Cree una carpeta llamada y abra la misma en Visual Studio IDE.
Para crear la configuración del proyecto, ejecute npm initbabelwebpack de la siguiente manera:
Aquí está el package.json creado después de npm init -
Ahora, instalaremos los paquetes necesarios que necesitamos para trabajar con babel y 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-envAquí está el Package.json después de la instalación:
Ahora, crearemos un archivo webpack.config.js, que tendrá todos los detalles para agrupar los archivos js. Estos archivos se compilarán en es5 usando babel.
Para ejecutar webpack usando el servidor, usamos webpack-server. A continuación se muestran los detalles añadidos:
Hemos agregado el comando de publicación que iniciará el webpack-dev-server y actualizará la ruta donde se almacenan los archivos finales. En este momento, la ruta que vamos a utilizar para actualizar los archivos finales es la carpeta / dev.
Para usar el paquete web, debemos ejecutar el siguiente comando:
npm run publishPrimero necesitamos crear los archivos webpack.config.js. Estos tendrán los detalles de configuración para que funcione el paquete web.
Los detalles en el archivo son los siguientes:
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']
}
}
]
}
};La estructura del archivo es como se muestra arriba. Comienza con la ruta h, que proporciona los detalles de la ruta actual.
var path = require('path'); //gives the current pathEl siguiente es el objeto module.exports, que tiene propiedades de entrada, salida y módulo. La entrada es el punto de partida. Aquí, debemos proporcionar los archivos js principales que se deben compilar.
entry: {
app: './src/main.js'
},path.resolve(_dirname, ‘src/main.js’) - buscará la carpeta src en el directorio y main.js en esa carpeta.
Salida
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},La salida es un objeto con detalles de ruta y nombre de archivo. La ruta contendrá la carpeta en la que se guardará el archivo compilado y el nombre del archivo indicará el nombre del archivo final que se utilizará en su archivo .html.
módulo
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
}El módulo es un objeto con detalles de las reglas. Tiene las siguientes propiedades:
- test
- include
- loader
- query
La prueba contendrá detalles de todos los archivos js que terminan con .js. Tiene el patrón, que buscará .js al final en el punto de entrada dado.
Incluir indica a la carpeta en uso los archivos que se van a examinar.
Loader utiliza babel-loader para compilar códigos.
La consulta tiene propiedades predeterminadas, que es una matriz con valor env - es5 o es6 o es7.
Cree la carpeta src y main.js en ella; escriba su código js en ES6. Luego, ejecute el comando para ver cómo se compila en es5 usando webpack y babel.
src/main.js
let add = (a,b) => {
return a+b;
};
let c = add(10, 20);
console.log(c);Ejecute el comando -
npm run packEl archivo compilado tiene el siguiente aspecto:
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)
}]);El código se compila como se muestra arriba. Webpack agrega un código que se requiere internamente y el código de main.js se ve al final. Hemos consolado el valor como se muestra arriba.
Agregue el archivo js final en el archivo .html de la siguiente manera:
<html>
<head></head>
<body>
<script type="text/javascript" src="dev/main_bundle.js"></script>
</body>
</html>Ejecute el comando -
npm run publish
Para verificar la salida, podemos abrir el archivo en -
http://localhost:8080/
Obtenemos el valor de la consola como se muestra arriba. Ahora intentemos compilar en un solo archivo usando webpack y babel.
Usaremos webpack para agrupar varios archivos js en un solo archivo. Se utilizará Babel para compilar el código es6 en es5.
Ahora, tenemos 2 archivos js en la carpeta src / - main.js y Person.js de la siguiente manera -
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;
}
}Hemos utilizado la exportación para utilizar los detalles de la clase Person.
main.js
import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);En main.js, hemos importado Person desde la ruta del archivo.
Note- No tenemos que incluir person.js sino solo el nombre del archivo. Hemos creado un objeto de la clase Person y hemos consolado los detalles como se muestra arriba.
Webpack combinará person.js y main.js y actualizar en dev/main_bundle.jscomo un archivo. Ejecuta el comandonpm run publish para comprobar la salida en el navegador -
