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 服务器 -

npm install lite-server --save-dev

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

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

src/scripts.js 的 JavaScript 如下 -

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

我们在 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 = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

我们需要运行以下命令，该命令将调用 babel 并编译代码。该命令将从 package.json 调用 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 || 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;
}();

现在让我们运行以下命令来启动服务器 -

npm run build

当命令运行时，它将在浏览器中打开 url -

输出

上述命令生成以下输出 -