BabelJS - Configurazione del progetto utilizzando Babel 6
In questo capitolo vedremo come utilizzare babeljs all'interno del nostro progetto. Creeremo un progetto usando nodejs e useremo il server locale http per testare il nostro progetto.
Crea configurazione progetto
In questa sezione impareremo come creare la configurazione del progetto.
Crea una nuova directory ed esegui il seguente comando per creare il progetto:
npm initProduzione
Al momento dell'esecuzione, il comando precedente genera il seguente output:
Di seguito è riportato il package.json che viene creato:
Installeremo i pacchetti necessari per iniziare a lavorare con babeljs. Eseguiremo il seguente comando per installare babel-cli, babel-core, babel-preset-es2015 .
npm install babel-cli babel-core babel-preset-es2015 --save-devProduzione
Al momento dell'esecuzione, il comando precedente genera il seguente output:
Package.json viene aggiornato come segue:
Abbiamo bisogno del server http per testare il file js. Esegui il seguente comando per installare il server http:
npm install lite-server --save-devAbbiamo aggiunto i seguenti dettagli in package.json:
Negli script, Babel si occupa di trasferire il file scripts.js dalla cartella src e lo salva nella cartella dev con il nome scripts.bundle.js . Abbiamo aggiunto il comando completo per compilare il codice che vogliamo in package.json. Inoltre, viene aggiunto il build che avvierà il lite-server per testare le modifiche.
Src / scripts.js ha il JavaScript come segue:
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;
}
}Abbiamo chiamato lo script traspilato in index.html come segue:
<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>Dobbiamo eseguire il seguente comando, che chiamerà babel e compilerà il codice. Il comando chiamerà Babel da package.json -
npm run babel
Scripts.bundle.js è il nuovo file js creato nella cartella dev -
L'output di dev/scripts.bundle.js è il seguente -
"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;
}();Ora eseguiamo il seguente comando per avviare il server:
npm run buildQuando il comando viene eseguito, aprirà l'URL nel browser -
Produzione
Il comando precedente genera il seguente output:
