BabelJS是一个javascript编译器,它根据可用的预设和插件更改给定代码的语法. babel编译流程涉及以下3个部分 :
解析
转换
打印
给babel的代码返回原样,只改变了语法.我们已经看到预设被添加到.babelrc文件中以编译从es6到es5的代码,反之亦然.预设只是一组插件.如果在编译期间没有给出预设或插件细节,Babel将不会改变任何内容.
现在让我们讨论以下插件 :
transform-class-properties
Transform-exponentiation-operator
For-of
object rest and spread
async/await
现在,我们将创建一个项目设置并且可以使用很少的插件,这将清楚地理解巴塞尔插件的要求.
npm init
我们必须为babel-babel cli,babel core,babel-preset等安装所需的软件包.
npm install babel-cli babel-core babel-preset-es2015 --save-dev
npm install @ babel/cli @ babel/core @ babel/preset-env - -save-dev
在项目中创建一个js文件并编写你的js代码.
为此目的观察下面给出的代码 :
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提供任何预设或插件详情.如果我们碰巧使用命令&minus来转换代码;
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 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; } }
有构造函数,并且在其中定义了类的所有属性. Incase,我们需要在类之外定义类属性,我们不能这样做.
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插件.为了使其正常工作,我们需要首先安装它,如下所示;
npm install --save-dev babel-plugin-transform-class-properties
npm install --save-dev @ babel/plugin-proposal-class-properties
添加插件到.babelrc文件为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;");
编译为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;");
输出
以下是我们在浏览器中使用时得到的输出 :
**是用于ES7中求幂的运算符.以下示例显示了ES7中的相同工作.它还显示了如何使用babeljs来转换代码.
let sqr = 9 ** 2; console.log("%c"+sqr, "font-size:25px;color:red;");
要转换指数运算符,我们需要安装一个插件,如下所示;
包for babel 6
npm install --save-dev babel-plugin-transform-exponentiation-operator
babel 7的套餐
npm install --save- dev @babel/plugin-transform-exponentiation-operator
将插件详细信息添加到 .babelrc 文件中,如下所示为babel 6&minus ;
{ "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;");
输出
babel6和7中插件所需的包如下:<
npm install --save-dev babel-plugin-transform-es2015-for-of
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; } } }
输出
所需的包babel6和7中的插件如下:<
npm install --save -dev babel-plugin-transform-object-rest-spread
npm install --save-dev @ babel/plugin-proposal-object-rest-spread
.babelrc for babel6
{ "plugins":["transform-object-rest-spread"] }
.babelrc for babel7
{ "plugins": ["transform-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&minus安装以下软件包;
npm install --save-dev babel-plugin-transform-async-to-generator
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,因为它不适用于不支持promises的浏览器.
输出