Babel的定义
babel是一个工具集，主要含@babel/cli、@babel/core、babel/preset-env这三个包。这个工具集是围绕@babel/core这个核心npm包构成的。每次@babel/core发布新版本的时候，整个工具集的其他npm包也都会跟着升级到与@babel/core相同的版本，即使它们的代码可能一行都没有改变。
-
@babel/cli是Babel命令行转码工具，如果我们使用命令行进行Babel转码就需要安装它 -
@babel/core是Babel的核心包，包含了Babel的转码API -
@babel/preset-env这个npm包提供了ES6转ES5的语法转换规则，我们需要再Babel配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码任然是ES6代码,相当于没有转码。
Babel的主要工作
- 语法转换
- 补齐API
补齐API的意思是通过polyfill的方式在目标环境中添加缺失的特性。
从广义上讲，polyfill是为环境提供不支持的特性的一类文件或库，从狭义上讲,其是polyfill.js文件及@babel/polyfill这个npm包.
Babel的配置文件
文件babel.config.js是Babel 执行时默认在当前目录下搜寻的Babel配置文件。除了babel.config.js配置文件，也可以选择.babelrc或.babelrc.js者两种配置文件，还可以直接将配置参数写在package.json文件里。它们都是相同的,只需要选择其中一种。
//babel.config.js
var year = 2020;
var presets = [];
if (year > 2018) {
presets = ["@babel/env"]
} else {
presets = ['es2015','es2016','es2017'];
}
module.exports = {
presets: presets,
plugins: [],
minified: false,
ignore: [],
};
插件与预设
Babel的插件实在太多了，假如都在plugins里一一配置，那么配置文件会非常臃肿。preset预设就是来解决这个问题的。预设就是一组Babel插件的集合，通俗的说法是插件包。另外，预设也可以是插件和其他预设的集合。Babel官方已经对常用的环境做了如下的preset包。
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
- @babel/preset-flow
plugins插件数组和presets预设数组是有顺序要求的。如果两个插件或预设都要处理同一个代码片段，那么会根据插件和预设的顺序来执行，规则如下：
- 插件比预设先执行
- 插件执行顺序是插件数组元素从前向后一次执行
- 预设执行顺序是预设数组元素从后向前依次执行
如果要给插件或者预设设置参数，那么元素就不能写成字符串了，而是改写成一个数组。
{
"presets":[
[
"@babel/preset-env",
{
targets:{ // 如果设置了targets，那么就不会使用browserslist的配置
"chrome":"58",
"ie":"11"
}
"useBuiltIns":"entry",// 1.false(默认值):polyfill引入全量代码 2.entry:根据目标环境缺失的api对polyfill进行部分引入(需要在项目入口处手动引入polyfill) 3.usage 只有当我们使用的ES6特性API在目标环境下缺失的时候，Babel才会一入core.js针对性引入polyfill(不需要在项目入口处手动引入polyfill)
"modules":auto,//auto(默认值,转换后的代码里import转换成require),可以是amd、umd、systemjs、commonjs、cjs、false
}
]
]
}
使用ES6模块化语法的好处：
在使用webpack一类的构建工具时，可以更好地进行静态分析，从而可以做Tree Shaking等优化措施。
对useBuiltIns进行测试，使用的入口文件入下：
// main.js
import '@babel/polyfill';
var fn = (num) => num + 2;
var promise = Promise.resolve('ok');
babel配置文件如下：
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
targets: {
// 如果设置了targets，那么就不会使用browserslist的配置
chrome: '58',
},
},
],
],
plugins: [],
minified: false,
ignore: [],
};
运行指令npx babel main.js -o compiled.js
1.useBuiltIns设置为entry
转换后的文件如
"use strict";
require("core-js/modules/es7.array.flat-map.js");
require("core-js/modules/es6.array.iterator.js");
require("core-js/modules/es6.array.sort.js");
require("core-js/modules/es7.object.define-getter.js");
require("core-js/modules/es7.object.define-setter.js");
require("core-js/modules/es7.object.lookup-getter.js");
require("core-js/modules/es7.object.lookup-setter.js");
require("core-js/modules/es7.promise.finally.js");
require("core-js/modules/es7.symbol.async-iterator.js");
require("core-js/modules/es7.string.trim-left.js");
require("core-js/modules/es7.string.trim-right.js");
require("core-js/modules/web.timers.js");
require("core-js/modules/web.immediate.js");
require("core-js/modules/web.dom.iterable.js");
var fn = num => num + 2;
var promise = Promise.resolve('ok');
引入了14个模块文件。
2.useBuiltIns设置为usage
转换后的文件如下:
"use strict";
var fn = num => num + 2;
var promise = Promise.resolve('ok');
没有引入任何core-js的API补齐模块，说明chorme v58都已经支持了。
3.useBuiltIns设置为false
转换后的文件如下:
"use strict";
require("@babel/polyfill");
var fn = num => num + 2;
var promise = Promise.resolve('ok');
直接引入了整个@babel/polyfill包。
虽然Babel 7官方有九十多格插件，不过其中大多数都已经整合在@babel/preset-env和@babel/preset-react等预设里了，我们在开发的时候直接使用预设就可以。
目前比较常用的插件只有@babel/plugin-transform-runtime
babel-polyfill
从Babel 7.4开始，官方就不推荐使用@babel/polyfill了，而是用core-js和regenerator-runtime,安装方式入戏
npm install -D core-js regenerator-runtime
在入口文件中引入，配置如：
// main.js
import 'core-js/stable';
import "regenerator-runtime/runtime";
又或者在webpack中配置，皆可
// webpack.config.js
const path = require('path');
module.exports = {
entry:['core-js/stable','regenerator-runtime/runtime','./a.js'],
output:{
filename:'main.js',
path:path.resolve(__dirname,'dist')
},
mode:'development'
}
如果我们的运行环境已经实现了部分ES6的功能，那么实在没有必要引入整个polyfill。我们可以将其部分引入，这时需要使用Babel预设(useBuiltIns来设置)或者插件来进行这部分引入的处理。
browserslist
browserslist叫作目标环境配置表，除了写在package.json文件里，也可以单独写在工程目录下的.browserslistrc里。browserslist是用来指定代码最终要运行在哪些浏览器或者Node.js环境里。PostCSS等可以根据我们设置的browserslist来自动判断是否要加CSS前者,Babel也可以根据browserslist来细化判断是否要转成ES5。
比如chrome60浏览器支持箭头函数，就不需要转成ES5的function形式。但如果是chrome38不支持箭头函数，就需要转换。
Babel使用的browserslist的配置功能依赖于@babel/preset-env,如果Babel没有配置任何预设或插件，那么Babel就不会对要转换的代码做任何处理，会原封不动地生成与转换前一样的代码。
"browserslist":[
">1%",
"not ie <= 8"
]
上面配置的含义是，该项目工程的目标环境是市场份额大于1%的浏览器且不考虑IE8及以下的IE浏览器。
转换过程的辅助函数
在使用Babel做语法转换的时候，需要Babel在转换后的代码里注入一些函数，然后才能正常工作。
入口文件:
class Person{
sayName () {
return 'name'
}
}
let john = new Person();
console.log(john);
babel配置：
module.exports = {
presets: [
[
'@babel/preset-env',
],
],
plugins: [],
minified: false,
ignore: [],
};
转化后的文件(为方便阅读，格式化处理了，默认输出的文件是压缩的):
'use strict';
function _typeof(o) {
'@babel/helpers - typeof';
return (
(_typeof =
'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
? function (o) {
return typeof o;
}
: function (o) {
return o &&
'function' == typeof Symbol &&
o.constructor === Symbol &&
o !== Symbol.prototype
? 'symbol'
: typeof o;
}),
_typeof(o)
);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a 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, _toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, 'prototype', { writable: false });
return Constructor;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, 'string');
return 'symbol' == _typeof(i) ? i : i + '';
}
function _toPrimitive(t, r) {
if ('object' != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || 'default');
if ('object' != _typeof(i)) return i;
throw new TypeError('@@toPrimitive must return a primitive value.');
}
return ('string' === r ? String : Number)(t);
}
var Person = /*#__PURE__*/ (function () {
function Person() {
_classCallCheck(this, Person);
}
return _createClass(Person, [
{
key: 'sayName',
value: function sayName() {
return 'name';
},
},
]);
})();
var john = new Person();
console.log(john);
可以看到转换后的代码上部增加了好几个函数声明，这些函数是Babel转码时注入的，我们称之为辅助函数。在实际开发中，我们少个几十个JS文件，多则上千个JS文件，如果每个转换后的JS文件里都注入这些辅助函数，会造成代码体积的增加。一个解决方案就是把需要的辅助函数放入一个npm包中，这样只需要引入一个包，减少了冗余的代码体积。
@babel/runtime会把所有语法转换会用到的辅助函数都集中在一起，这就是上面说的npm包。
需要安装这一个npm包，
npm install --save @babel/runtime
以需要的_classCallCheck方法为例，我们可以在node_modules中找到
runTimeFunction.png
接下来就可以手动替换了。
but，手动替换是一件多么麻烦的事情，这时Babel插件@babel/plugin-transform-runtime就派上用场了。
它可以自动移除语法转换后内联的辅助函数，而是使用@babel/runtime/helpers里的辅助函数来替代，就减少了手动引入的麻烦。
插件需要安装
npm install --save-dev @babel/plugin-transform-runtime
在babel.config.js中配置使用
module.exports = {
presets: [['@babel/preset-env']],
plugins: ['@babel/plugin-transform-runtime'],
minified: false,
ignore: [],
};
我们重新运行指令
npx babel testHelper.js -o helper.js
得到的文件如下:
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var Person = /*#__PURE__*/function () {
function Person() {
(0, _classCallCheck2["default"])(this, Person);
}
return (0, _createClass2["default"])(Person, [{
key: "sayName",
value: function sayName() {
return 'name';
}
}]);
}();
var john = new Person();
console.log(john);
可以看到，生成的代码里自动引入了辅助函数，并且比手动引入要更有优雅。实际在进行前端开发的时候，除了安装@babel/runtime包，基本也安装@babel/plugin-transform-runtime这个Babel插件。
QA：既然每个转换后的代码上部都会注入一些相同的函数声明，那么为何不用webpack一类的构建工具去掉重复的函数声明，而是单独引入一个辅助函数包？
这是因为webpack在构建的时候，是基于模块来做去重工作的。每一个函数声明都是引用类型。在堆内存不同的空间存放，缺少唯一的地址来找到它们。 所以webpack本身做不到把每个文件中的相同函数声明去重。因此，我们需要单独的辅助函数包，这样webpack打包的时候会基于模块来做去重工作。
@babel/plugin-transform-runtime有如下三大作用：
自动移除语法转换后内联的辅助函数(inline Babel helpers)，而是使用
@babel/runtime/helpers里的辅助函数来替代，就减少了手动引入的麻烦。当代码里使用了core-js的api时，自动引入
@babel/runtime-corejs3/core-js-stabel/,以此来替换全局引入的core-js/stable当代码里使用了
Generator时，自动引入@babel/runtime/regenerator,以此来替换全局引入的regenerator-runtime/runtime
作用二和作用三其实都是在作API转换，目的是对内置对象进行重命名，以防止污染全局环境。
在我们引入babel-polyfill的时候，或者引入了core-js/stable和regenerator-runtime/runtime两个包,来做全局的API补齐，但这同时可能产生一个问题，就是对运行环境造成污染。例如polyfill重写了window.Promise及其原型链。
在我们不希望重新window.Promise的时候，我们就可以使用@babel/plugin-transform-runtime进行转换。
对转化前的代码如：
async function test() {
await 1;
}
若使用babel-polyfill来转换，转换后的代码如下：
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
require("core-js/modules/es6.object.define-property.js");
require("core-js/modules/es6.symbol.js");
require("core-js/modules/es6.string.iterator.js");
require("core-js/modules/es6.array.iterator.js");
require("core-js/modules/web.dom.iterable.js");
require("core-js/modules/es7.symbol.async-iterator.js");
require("core-js/modules/es6.object.create.js");
require("core-js/modules/es6.object.get-prototype-of.js");
require("core-js/modules/es6.array.for-each.js");
require("core-js/modules/es6.function.name.js");
require("core-js/modules/es6.object.set-prototype-of.js");
require("core-js/modules/es6.array.slice.js");
require("core-js/modules/es6.object.to-string.js");
require("core-js/modules/es6.promise.js");
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function test() {
return _test.apply(this, arguments);
}
function _test() {
_test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var obj;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
obj = Promise.resolve('ok');
return _context.abrupt("return", obj);
case 2:
case "end":
return _context.stop();
}
}, _callee);
}));
return _test.apply(this, arguments);
}
若我们开启@babel/plugin-transform-runtime的API转换，得到代码如下：
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
require("core-js/modules/es6.object.to-string.js");
require("core-js/modules/es6.promise.js");
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
function test() {
return _test.apply(this, arguments);
}
function _test() {
_test = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var obj;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
obj = Promise.resolve('ok');
return _context.abrupt("return", obj);
case 2:
case "end":
return _context.stop();
}
}, _callee);
}));
return _test.apply(this, arguments);
}
使用的babel.config.js的配置如下:
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
}
],
],
plugins: [['@babel/plugin-transform-runtime', {
'helper': true,// 是否自动引入辅助函数,默认true
'core.js': false,// 默认false,如果需要使用core-js2或者3做转换，这里配置成2或者3
'regenerator': true,// 默认值是true
'useESModules': true,// 使用使用ES6的模块化语法，默认是false,在用webpack一类的构建工具时，可以设置为true,方便做静态分析
'absoluteRuntime': false,//用来自定义@babel/plugin-transform-runtime引入@babel/runtime/模块的路径规则，取值是布尔值或者字符串。一般没有特殊要求，保持默认值false即可
'version': '7',// 和@babel/runtime及其进化版@babel/runtime-corejs2、@babel/runtime-corejs3的版本对应，填写任意一个包的版本即可(依据package.json文件)，填写版本号主要是可以减少打包体积
}]],
};
对比可以看出
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
@babel/plugin-transform-runtime替换掉了一些core.js包的引入
其实，api转换主要是给开发JS库或者npm包的人使用的，前端工程例一般仍然使用polyfill来补齐API。
对于@babel/runtime及其进化版@babel/runtime-corejs2和@babel/runtime-corejs3,依据需要安装一个即可。如果不需要对core-js做API转换，那么安装@babel/runtime并把corejs配置项设置成false。
核心包@babel/core
无论是用命令行，还是通过webpack进行转码,底层都是通过Node.js来调用@babel/core相关功能的API来实现的。
使用如下代码做测试:
let babelCore = require('@babel/core');
let es6core = `var fn = (num)=> num + 2`;
let options = {
presets:["@babel/env"]
}
let result = babelCore.transform(es6core, options);
console.log(result);
console.log('-------------');
console.log('-------------');
console.log(result.code);
运行可以看到
transform.png
调用transform方法后生成的结果是一个对象，该对象的code属性就是转码后的结果。
babel原理
babel转码过程
babel的转码过程主要由三个阶段组成：解析(parse)、转换(transform)、生成(generator),这三个阶段分别由@babel/parser,@babel/core,@babel/generator来完成。
举个例子
转换前的代码
let name = 'Jack';
解析阶段,会转换成如下结构
{
"标识符":"var",
"变量名":"name",
"变量值":"Jack"
}
转换阶段，将let是ES6中语法，把它转换成ES5的var，而其他部分保持不变，转换后如下
{
"标识符":"let",
"变量名":"name",
"变量值":"Jack"
}
到了生成阶段，我们把转换后的结构还原成JS代码
var name = 'Jack'
babel转码分析
解析阶段
该阶段由Babel读取源码并生成抽象语法书(AST),该阶段由两部分组成:词法分析与语法分析。词法分析会将字符串形式的代码转换成token流，语法分析会将tokens流转换成AST。转换阶段
上一个阶段完成了解析工作，生成了AST，AST是一个树状的JSON结构。接下来就可以通过Babel插件度该树状结构执行修改操作，修改完成后就得到了新的AST。生成阶段
通过转换阶段的工作，我们得到了新的AST。在生成阶段，对AST的树状JSON结构进行还原，生成新的JS代码。
以上三个阶段重点是第二个阶段(转换阶段)，该阶段使用不同的Babel插件会得到不同的AST，也就意味着最终会生成不同的JS代码。在开发工作中，主要工作也是选择合适的Babel插件或者预设。
自定义babel插件
创建一个babelPlugins文件夹，里面会含demo.js,animalToDog.js和babel.config.js文件，
demo文件内容如下
let animal = 'hello world';
animalToDog.js是的插件，babel插件本身是第一个JS函数，文件内容如下
// babel插件本质上就是一个函数
module.exports = function({ types: t }) {
return {
name:'animalToDog',// 插件的名称
visitor: {// visitor对象是遍历AST各个节点的方法
Identifier(path,state) {
if (path.node.name === 'animal') {
path.node.name = 'dog';
}
},
VariableDeclaration (path, state) {
// state.opts是插件的传参
if (path.node.kind === 'let' && state.opts.ES5 == true) {
path.node.kind = 'var';
}
}
}
}
}
可以看到其对外导出了一个函数
babel.config.js文件内容如下
// babel.config.js
module.exports = {
plugins: [['./animalToDog.js', {
ES5:false,
}]],
}
运行指令npx babel demo.js -o after.js(需要先安装@babel/cli、@babel/core)
得到的after.js文件内容如下
// after.js
var dog = 'hello world';
可以看到我们成功把animal改成了dog,把let改成了var.
