BabelJS-Babel 플러그인

BabelJS는 사용 가능한 사전 설정 및 플러그인을 기반으로 주어진 코드의 구문을 변경하는 자바 스크립트 컴파일러입니다. 바벨 컴파일의 흐름은 다음 세 부분으로 구성됩니다.

  • parsing
  • transforming
  • printing

바벨에게 주어진 코드는 구문이 변경된 그대로 다시 제공됩니다. es6에서 es5로 또는 그 반대로 코드를 컴파일하기 위해 .babelrc 파일에 사전 설정이 추가되는 것을 이미 보았습니다. 사전 설정은 플러그인 집합 일뿐입니다. 컴파일 중에 사전 설정 또는 플러그인 세부 정보가 제공되지 않으면 Babel은 아무것도 변경하지 않습니다.

이제 다음 플러그인에 대해 논의하겠습니다.

  • transform-class-properties
  • Transform-exponentiation-operator
  • For-of
  • 개체 휴식 및 확산
  • async/await

이제 우리는 프로젝트 설정을 만들고 몇 가지 플러그인에 대한 작업을 수행하여 babel의 플러그인 요구 사항을 명확하게 이해할 수 있습니다.

명령

npm init

babel에 필요한 패키지를 설치해야합니다 – babel cli, babel core, babel-preset 등.

바벨 6 용 패키지

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

바벨 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 파일.

Note − 만들기 .babelrc 프로젝트의 루트 폴더 안에있는 파일.

.babelrc for babel 6

.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-plugin-transform-class-properties라는 babel 플러그인을 사용할 수 있습니다. 작동하려면 먼저 다음과 같이 설치해야합니다.

바벨 6 용 패키지

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

바벨 7 패키지

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

Add the plugin to .babelrc file for babel 6 −

.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;");

Compiled to 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;");

Output

다음은 브라우저에서 사용할 때 얻는 출력입니다.

지수 연산자-변환 지수 연산자

**는 ES7에서 지수화에 사용되는 연산자입니다. 다음 예는 ES7에서 동일한 작업을 보여줍니다. 또한 babeljs를 사용하여 코드를 트랜스 파일하는 방법도 보여줍니다.

예

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

지수 연산자를 변환하려면 다음과 같이 플러그인을 설치해야합니다.

Packages for babel 6

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

Packages for babel 7

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

플러그인 세부 정보 추가 .babelrc 바벨 6에 대한 다음 파일-

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

.babelrc for babel 7

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

command

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;");

Output

의

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

Output

개체 휴식 확산

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

Output

비동기 / 대기

바벨 6을 위해 다음 패키지를 설치해야합니다-

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

바벨 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();

promise가 지원되지 않는 브라우저에서는 작동하지 않으므로 polyfill을 사용해야합니다.

Output

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved