BabelJS - Babel 外掛

上一頁
下一頁

BabelJS 是一個 JavaScript 編譯器，它根據可用的預設和外掛更改給定程式碼的語法。Babel 編譯流程涉及以下三個部分：

  • 解析
  • 轉換
  • 列印

提供給 Babel 的程式碼會原樣返回，只是語法發生了變化。我們已經看到將預設新增到 .babelrc 檔案中以將程式碼從 es6 編譯到 es5 或反向編譯。預設只是一組外掛。如果在編譯期間未提供預設或外掛的詳細資訊，Babel 將不會更改任何內容。

現在讓我們討論以下外掛：

  • transform-class-properties
  • transform-exponentiation-operator
  • for...of
  • 物件 rest 和 spread
  • async/await

現在，我們將建立一個專案設定並使用一些外掛，這將使我們清楚地瞭解 Babel 中外掛的需求。

命令

npm init

我們必須安裝 Babel 所需的軟體包——Babel CLI、Babel Core、Babel 預設等。

Babel 6 的軟體包

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

Babel 7 的軟體包

npm install @babel/cli @babel/core @babel/preset-env --save-dev

在專案中建立一個 js 檔案並編寫你的 js 程式碼。

類 - transform-class-properties

為此，請觀察以下程式碼：

示例

main.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

現在，我們還沒有為 Babel 提供任何預設或外掛詳細資訊。如果我們使用以下命令轉換程式碼：

npx babel main.js --out-file main_out.js

main_out.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

我們將得到與原始碼相同的程式碼。現在讓我們將預設新增到 **.babelrc** 檔案中。

**注意** - 在專案根目錄中建立 **.babelrc** 檔案。

.babelrc for babel 6

Babelrc For Babel

.babelrc for babel 7

{
   "presets":["@babel/env"]
}

我們已經安裝了預設；現在讓我們再次執行命令：

npx babel main.js --out-file main_out.js

main_out.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 Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);
   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

在 ES6 中，類語法如下：

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}

其中包含建構函式和類的所有屬性。如果需要在類外部定義類屬性，則無法這樣做。

示例

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

如果編譯上述程式碼，它將在 Babel 中丟擲錯誤。這導致程式碼無法編譯。

Error In Babel

為了使其按我們想要的方式工作，我們可以使用名為 babel-plugin-transform-class-properties 的 Babel 外掛。要使其工作，我們需要首先安裝它，如下所示：

Babel 6 的軟體包

npm install --save-dev babel-plugin-transform-class-properties

Babel 7 的軟體包

npm install --save-dev @babel/plugin-proposal-class-properties

**將外掛新增到 Babel 6 的 .babelrc 檔案中**：

Add Plugin Babelrc

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-proposal-class-properties"]
}

現在，我們將再次執行命令。

命令

npx babel main.js --out-file main_out.js

main.js

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

編譯到 main_out.js

class Person {
   constructor() {
      this.name = "Siya Kapoor";

      this.fullname = () => {
         return this.name;
      };
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

輸出

以下是我們在瀏覽器中使用時獲得的輸出：

Babelrc Output

指數運算子 - transform-exponentiation-operator

** 是 ES7 中用於指數運算的運算子。以下示例顯示了 ES7 中相同運算子的工作方式。它還展示瞭如何使用 babeljs 轉換程式碼。

示例

let sqr = 9 ** 2;
console.log("%c"+sqr, "font-size:25px;color:red;");

要轉換指數運算子，我們需要安裝一個外掛，如下所示：

Babel 6 的軟體包

npm install --save-dev babel-plugin-transform-exponentiation-operator

Babel 7 的軟體包

npm install --save-dev @babel/plugin-transform-exponentiation-operator

將外掛詳細資訊新增到 Babel 6 的 **.babelrc** 檔案中，如下所示：

{
   "plugins": ["transform-exponentiation-operator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-exponentiation-operator"]
}

命令

npx babel exponeniation.js --out-file exponeniation_out.js

exponeniation_out.js

let sqr = Math.pow(9, 2);
console.log("%c" + sqr, "font-size:25px;color:red;");

輸出

Exponeniation Output

for...of

Babel 6 和 7 中外掛所需的軟體包如下：

Babel 6

npm install --save-dev babel-plugin-transform-es2015-for-of

Babel 7

npm install --save-dev @babel/plugin-transform-for-of

.babelrc for babel 6

{
   "plugins": ["transform-es2015-for-of"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-for-of"]
}

forof.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
for (var i of foo) {
   console.log(i);
}

命令

npx babel forof.js --out-file forof_es5.js

Forof_es5.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var i = _step.value;

      console.log(i);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

輸出

Forof es5 Output

物件 rest spread

Babel 6 和 7 中外掛所需的軟體包如下：

Babel 6

npm install --save-dev babel-plugin-transform-object-rest-spread

Babel 7

npm install --save-dev @babel/plugin-proposal-object-rest-spread

.babelrc for babel 6

{
   "plugins": ["transform-object-rest-spread"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

o.js

let { x1, y1, ...z1 } = { x1: 11, y1: 12, a: 23, b: 24 };
console.log(x1);
console.log(y1);
console.log(z1);

let n = { x1, y1, ...z1};
console.log(n);

命令

npx babel o.js --out-file o_es5.js

o_es5.js

var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i]; for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]; 
         } 
      } 
   } 
   return target; 
};

function _objectWithoutProperties(obj, keys) {
   var target = {};
   for (var i in obj) {
      if (keys.indexOf(i) >= 0) continue;
      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
      target[i] = obj[i];
   }
   return target;
}

let _x1$y1$a$b = { x1: 11, y1: 12, a: 23, b: 24 },
   { x1, y1 } = _x1$y1$a$b,
   z1 = _objectWithoutProperties(_x1$y1$a$b, ["x1", "y1"]);
console.log(x1);
console.log(y1);
console.log(z1);

let n = _extends({ x1, y1 }, z1);
console.log(n);

輸出

Object Rest Spread Output

async/await

我們需要為 Babel 6 安裝以下軟體包：

npm install --save-dev babel-plugin-transform-async-to-generator

Babel 7 的軟體包

npm install --save-dev @babel/plugin-transform-async-to-generator

.babelrc for babel 6

{
   "plugins": ["transform-async-to-generator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-async-to-generator"]
}

async.js

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

命令

npx babel async.js --out-file async_es5.js

async_es5.js

function _asyncToGenerator(fn) {
   return function () {
      var gen = fn.apply(this, arguments);
      return new Promise(function (resolve, reject) {
         function step(key, arg) {
            try {
               var info = gen[key](arg);
               var value = info.value; 
            } catch (error) {
               reject(error);
               return; 
            } if (info.done) {
               resolve(value); 
            } else {
               return Promise.resolve(value).then(function (value) {
                  step("next", value);
               },
               function (err) {
                  step("throw", err); }); 
            }
         } return step("next"); 
      });
   };
}

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = (() => {
   var _ref = _asyncToGenerator(function* () {
      let msg = yield timer();
      console.log(msg);
      console.log("hello after await");
   });

   return function out() {
      return _ref.apply(this, arguments);
   };
})();
out();

我們必須為此使用 polyfill，因為它在不支援 Promise 的瀏覽器中不起作用。

輸出

Async es5 output
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.