Babel 7有哪些新特性
原创
升级Babel 7后有哪些新特性呢？
1、首先是babel在转换js时将js的语法分为了两部分一部分是语法，一部分是api，语法可以根据环境配置来转换，而api则需要安装特定的插件。
那些是语法那些是api呢？箭头函数、let 、const、class等等是语法，promise、内置函数时api。
所以我们需要指定执行环境 Browserslist， Browserslist 的配置有几种方式，并按下面的优先级使用：
@babel/preset-env里的targetspackage.json里的browserslist字段.browserslistrc配置文件
例如我们配置 .babelrc 如下：
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": 10
}
}
]
]
}
源代码：
// index.js
const f = () => {};
new Promise();
class Test {}转换后：
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var f = function f() {};
new Promise();
var Test = function Test() {
_classCallCheck(this, Test);
};可以看到 class和let 进行了转换，但是promise没有转换，这是因为api不是默认转换的，需要配置pollyfill。
polyfill 的使用在 Babel 7 有主要以下两种方式：
1、useBuiltIns 提供 false, entry, usage 三种方式：
a、useBuiltIns为false时，此时不对polyfill做操作。如果引入@babel/polyfill，则无视配置的浏览器兼容，引入所有的polyfill。
b、useBuiltIns为entry时，意思是在入口文件手动引入polyfill。有两个版本
a、如果是这样配置的：
"useBuiltIns": "entry",
"corejs": 2,入口文件则这样引入：
import '@babel/polyfill'b、如果是这样配置的：
"useBuiltIns": "entry",
"corejs": 3,入口文件这样引入：
import 'core-js/stable';
import 'regenerator-runtime/runtime';以上这种方式不同于第一种方式，会根据浏览器的环境按需引入，比第一种稍强，第一种就是个例子，基本没人会使用。
c、当useBuiltIns为usage时，此时不需要手动引入了，会根据代码的使用情况按需引入。
上面的代码怀转化为：
"use strict";
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var f = function f() {};
new Promise();
var Test = function Test() {
_classCallCheck(this, Test);
};我们看到里面有一个Classback函数，这个函数会生成多个重复的，该怎么办呢？需要这样配置：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 2,
"targets": {
"ie": 10
}
}
]
],
"plugins": [
["@babel/plugin-transform-runtime"]
]
}此时转化代码为：
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");
var f = function f() {};
new Promise();
var Test = function Test() {
(0, _classCallCheck2.default)(this, Test);
};可以看到将重复的helper函数变成了模块引入，而不用重复的定义了。
总结：useBuiltIns有三种使用方式，第一种最废物，第二种会根据浏览器环境引入，并且前两种都需要在入口文件手动引入，第三种按使用需要引入，并且不需要手动引入，但是第三种会生成很多多余的helpers函数，需要结合@babel/plugin-transform-runtime这个插件来规避这个问题，将重复引入的函数，提取成工具包。
以上便是babel7的特性希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。