BabelJS教程

BabelJS - 使用Babel 6进行项目设置

在本章中，我们将了解如何在项目中使用babeljs。我们将使用nodejs创建一个项目，并使用http本地服务器来测试我们的项目。

创建项目设置

在本节中，我们将学习如何创建项目设置。

创建一个新目录并运行以下命令来创建项目−

 
 npm init

输出

执行时，上面的命令会生成以下输出−

以下是创建的减去的package.json;

我们将安装开始使用babeljs所需的软件包。我们将执行以下命令来安装 babel-cli，babel-core，babel-preset-es2015 。

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

输出

执行时，上面的命令生成以下输出−

Package.json更新如下−

我们需要http服务器来测试js文件。执行以下命令安装http server−

 
 npm install lite-server --save-dev

我们在package.json&minus中添加了以下详细信息;

在脚本中，Babel负责从 src 文件夹中转换scripts.js并将其保存在名为<的 dev 文件夹中I> scripts.bundle.js 的。我们添加了完整的命令来编译package.json中我们想要的代码。此外，还添加了 build ，它将启动 lite-server 来测试更改。

src / scripts.js有JavaScript如下−

 
 class Student {
 constructor（fname，lname，age，address）{
 this .fname = fname; 
 this.lname = lname; 
 this.age =年龄; 
 this.address = address; 
} 
 get fullname（）{
 return this.fname +" - "+ this.lname; 
} 
}

我们在index.html中调用了已编译的脚本，如下所示;

 
< 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 =新学生（"Siya"，"Kapoor"，"15"，"Mumbai"）; 
 var studentdet = a.fullname; 
 document.getElementById（"displayname"）。innerHTML = studentdet; 
< / script> 
< / body> 
< / html>

我们需要运行以下命令，它将调用babel并编译代码。该命令将从package.json&minus中调用Babel;

 
 npm run babel

scripts.bundle.js是在dev文件夹中创建的新js文件−

dev / scripts.bundle.js 的输出如下−

 
"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 ||假; 
 descriptor.configurable = true; 
 if（描述符中的"value"）descriptor.writable = true; 
 Object.defineProperty（target，descriptor.key，descriptor）; 
} 
} 
返回函数（构造函数，protoProps，staticProps）{
 if（protoProps）defineProperties（Constructor.prototype，protoProps）; 
 if（staticProps）defineProperties（Constructor，staticProps）; 
 return构造函数; 
}; 
}（）; 
函数_classCallCheck（实例，构造函数）{
 if（！（instance instanceof Constructor））{
抛出新的TypeError（"不能将类称为函数"）; 
} 
} 
 var学生=函数（）{
函数学生（fname，lname，年龄，地址）{
 _classCallCheck（this，Student ）; 
 this.fname = fname; 
 this.lname = lname; 
 this.age =年龄; 
 this.address = address; 
} 
 _createClass（学生，[{
键:"fullname"，
 get:function get（）{
 return this.fname +" - "+ this.lname; 
} 
}]）; 
返回学生; 
}（）;