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中添加了以下內容：

在scripts中，Babel負責將src資料夾中的scripts.js轉換為dev資料夾中的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 = 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：

輸出

上述命令生成以下輸出：

列印頁面