Babeljs-babel-plugins

提供：Dev Guides
移動先:案内、検索

BabelJS-Babelプラグイン

BabelJSは、使用可能なプリセットとプラグインに基づいて、指定されたコードの構文を変更するjavascriptコンパイラです。 バベルのコンパイルの流れには、次の3つの部分が含まれます-

  • 解析中
  • 変身
  • 印刷

babelに与えられたコードは、構文が変更されただけで返されます。 コードをes6からes5に、またはその逆にコンパイルするために、プリセットが.babelrcファイルに追加されるのをすでに見てきました。 プリセットはプラグインのセットにすぎません。 コンパイル時にプリセットまたはプラグインの詳細が指定されていない場合、Babelは何も変更しません。

私たちは今、次のプラグインについて議論しましょう-

  • 変換クラスのプロパティ
  • 変換指数演算子
  • の
  • オブジェクトの残りと広がり
  • 非同期/待機

次に、プロジェクトのセットアップを作成し、いくつかのプラグインで作業します。これにより、Babelのプラグインの要件を明確に理解できます。

コマンド

npm init

babelに必要なパッケージをインストールする必要があります– babel cli、babel core、babel-presetなど。

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 

*babel 7の.babelrc*
{
   "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でエラーがスローされます。 これにより、コードがコンパイルされなくなります。

バベルのエラー

これを希望どおりに機能させるために、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ファイルに追加します-

プラグインBabelrcの追加 

*babel 7の.babelrc*
{
   "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出力

べき乗演算子-変換指数演算子

*ES7でべき乗に使用される演算子です。 次の例は、ES7での同じ動作を示しています。 また、babeljsを使用してコードをトランスパイルする方法も示します。

例

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

べき乗演算子を変換するには、次のようにプラグインをインストールする必要があります-

バベル6のパッケージ 

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

バベル7のパッケージ 

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

babel 6の場合、次のようにプラグインの詳細を .babelrc ファイルに追加します- 

{
   "plugins": ["transform-exponentiation-operator"]
}
*babel 7の.babelrc*
{
   "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;");

出力

爆発出力

の

babel6および7のプラグインに必要なパッケージは次のとおりです-

バベル6

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

バベル7

npm install --save-dev @babel/plugin-transform-for-of
*.babelrc for babel6*
{
   "plugins": ["transform-es2015-for-of"]
}
*.babelrc for babel7*
{
   "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;
      }
   }
}

出力

Fores es5出力

オブジェクトレストスプレッド

babel6および7のプラグインに必要なパッケージは次のとおりです-

バベル6

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

バベル7

npm install --save-dev @babel/plugin-proposal-object-rest-spread
*.babelrc for babel6*
{
   "plugins": ["transform-object-rest-spread"]
}
*.babelrc for babel7*
{
   "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);

出力

オブジェクトレストスプレッド出力

非同期/待機

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"]
}
*babel 7の.babelrc*
{
   "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();

約束がサポートされていないブラウザでは機能しないため、ポリフィルを使用する必要があります。

出力

es5の非同期出力

「https://www.finddevguides.com/index.php?title=Babeljs-babel-plugins&oldid=21939」から取得
Powered by MediaWiki