BabelJS - Travailler avec BabelJS et Gulp

Dans ce chapitre, nous allons créer la configuration du projet en utilisant babel et gulp. Gulp est un exécuteur de tâches qui utilise Node.js comme plate-forme. Gulp exécutera les tâches qui transpileront les fichiers JavaScript de es6 à es5 et, une fois terminé, démarrera le serveur pour tester les modifications. Nous avons utilisé babel 6 dans la configuration du projet. Si vous souhaitez passer à babel 7, installez les packages requis de babel en utilisant@babel/babel-package-name.

Nous allons d'abord créer le projet à l'aide des commandes npm et installer les packages requis pour commencer.

commander

npm init

Nous avons créé un dossier appelé gulpbabel. De plus, nous installerons gulp et d'autres dépendances requises.

commander

npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-connect --save-dev
npm install babel-preset-env --save-dev
npm install babel-core --save-dev

Nous ajouterons les détails de l'environnement Preset à .babelrc fichier comme suit

gulpfile.js

var gulp =require('gulp');
var babel =require('gulp-babel');
var connect = require("gulp-connect");
gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

Nous avons créé trois tâches dans gulp, ['build', 'watch', 'connect']. Tous les fichiers js disponibles dans le dossier src seront convertis en es5 en utilisant babel comme suit -

gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

Les modifications finales sont stockées dans le dossier dev. Babel utilise les détails des préréglages de.babelrc. Si vous souhaitez passer à un autre préréglage, vous pouvez modifier les détails dans.babelrc fichier.

Maintenant va créer un fichier .js dans le dossier src en utilisant le javascript es6 et exécuter gulp start commande pour exécuter les modifications.

src/main.js

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;
   }
}

Command: gulp start

dev/main.js

Ceci est transpilé à l'aide de babel -

"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 Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }
   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

Index.html

Ceci est fait en utilisant transpiled dev/main.js -

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main.js"></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>

Output

↰ Previous page Next page ↱

BabelJS - Travailler avec BabelJS et Gulp

commander

commander

Tutoriel BabelJs