BabelJS - Configuration de projet avec Babel 6
Dans ce chapitre, nous verrons comment utiliser babeljs dans notre projet. Nous allons créer un projet en utilisant nodejs et utiliser le serveur local http pour tester notre projet.
Créer une configuration de projet
Dans cette section, nous allons apprendre à créer une configuration de projet.
Créez un nouveau répertoire et exécutez la commande suivante pour créer le projet -
npm initProduction
Lors de l'exécution, la commande ci-dessus génère la sortie suivante -
Voici le package.json qui est créé -
Nous installerons les packages nécessaires pour commencer à travailler avec babeljs. Nous allons exécuter la commande suivante pour installer babel-cli, babel-core, babel-preset-es2015 .
npm install babel-cli babel-core babel-preset-es2015 --save-devProduction
Lors de l'exécution, la commande ci-dessus génère la sortie suivante -
Package.json est mis à jour comme suit -
Nous avons besoin d'un serveur http pour tester le fichier js. Exécutez la commande suivante pour installer le serveur http -
npm install lite-server --save-devNous avons ajouté les détails suivants dans package.json -
Dans les scripts, Babel se charge de transpiler le script.js du dossier src et le sauvegarde dans le dossier dev sous le nom scripts.bundle.js . Nous avons ajouté la commande complète pour compiler le code que nous voulons dans package.json. De plus, une version est ajoutée, ce qui démarrera le serveur lite pour tester les modifications.
Le src / scripts.js a le JavaScript comme suit -
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;
}
}Nous avons appelé le script transpiled dans index.html comme suit -
<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>Nous devons exécuter la commande suivante, qui appellera babel et compilera le code. La commande appellera Babel depuis package.json -
npm run babel
Le scripts.bundle.js est le nouveau fichier js créé dans le dossier dev -
La sortie de dev/scripts.bundle.js est comme suit -
"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;
}();Maintenant, exécutons la commande suivante pour démarrer le serveur -
npm run buildLorsque la commande s'exécute, elle ouvrira l'url dans le navigateur -
Production
La commande ci-dessus génère la sortie suivante -
