BabelJS - Configuración del proyecto usando Babel 6

En este capítulo, veremos cómo usar babeljs dentro de nuestro proyecto. Crearemos un proyecto usando nodejs y usaremos el servidor local http para probar nuestro proyecto.

Crear configuración de proyecto

En esta sección, aprenderemos cómo crear una configuración de proyecto.

Cree un nuevo directorio y ejecute el siguiente comando para crear el proyecto:

npm init

Salida

Tras la ejecución, el comando anterior genera la siguiente salida:

A continuación se muestra el package.json que se crea:

Instalaremos los paquetes necesarios para empezar a trabajar con babeljs. Ejecutaremos el siguiente comando para instalar babel-cli, babel-core, babel-preset-es2015 .

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Salida

Tras la ejecución, el comando anterior genera la siguiente salida:

Package.json se actualiza de la siguiente manera:

Necesitamos un servidor http para probar el archivo js. Ejecute el siguiente comando para instalar el servidor http:

npm install lite-server --save-dev

Hemos agregado los siguientes detalles en package.json:

En scripts, Babel se encarga de transpilar scripts.js de la carpeta src y lo guarda en la carpeta dev con el nombre scripts.bundle.js . Hemos agregado el comando completo para compilar el código que queremos en package.json. Además, se agrega una compilación que iniciará el servidor lite para probar los cambios.

Src / scripts.js tiene JavaScript de la siguiente manera:

class Student {
   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 llamado al script transpilado en index.html de la siguiente manera:

<html>
   lt;head></head>
   <body>
      <script type="text/javascript" src="dev/scripts.bundle.js?a=11"></script>
      <h1 id="displayname"></h1>
      <script type="text/javascript">
         var a = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

Necesitamos ejecutar el siguiente comando, que llamará a babel y compilará el código. El comando llamará a Babel desde package.json -

npm run babel

Scripts.bundle.js es el nuevo archivo js creado en la carpeta dev -

La salida de dev/scripts.bundle.js es como sigue -

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor); 
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor; 
   };
}();

function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Student = function () {
   function Student(fname, lname, age, address) {
      _classCallCheck(this, Student);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Student, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Student;
}();

Ahora ejecutemos el siguiente comando para iniciar el servidor:

npm run build

Cuando se ejecuta el comando, abrirá la URL en el navegador:

Salida

El comando anterior genera la siguiente salida:

↰ Previous page Next page ↱