Babel在面试过程中的考点
Babel功能：解析JS新语法，转化成低版本语法供浏览器使用。
一、环境搭建 & 基本配置
yarn init -y
yarn add @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/polyfill @babel/runtime
babel配置文件.babelrc ：
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
]
}
基本使用：
src/index.js
const sum = (a, b) => a + b
执行命令：
yarn babel src/index.js
命令行输出结果：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
babel本身是一个空壳，它只是一个流程工具，它之所以可以将ES6转换成ES5语法，是每个plugin起的作用，而所需要的plugin太多的话，难以记住，所以采取preset预设方案，preset就是把许多plugin重新打一个包取一个名字，比如preset-env,preset-flow,preset-react,preset-typescript,preset-env就包含了很多转换ES6语法的plugin，如果不够用的话还可以配置单独的plugin
二、babel-polyfill
babel-polyfill就是core-js和regenerator的集合
1. Polyfill是一种JS的语法补丁方案。
比如说有些低版本的IE浏览器不支持Array.indexOf,那么就可以在网上找一个Array.indexOf的Polyfill放到项目中，处理浏览器兼容性问题
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
// ......
}
}
2. core-js是官方提供的ES6、ES7等新语法的Polyfill集合
3. regenerator 是generator语法的Polyfill
Babel 7.4 之后弃用babel-polyfill，推荐直接使用core-js和regenerator
babel的preset-env可能无法转换新的API，因为他们的语法已经符合ES5的语法规范，例如：
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
使用babel处理后：
"use strict";
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
所以此时需要引入babel-polyfill
import '@babel/polyfill'
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
进行babel转换后：
"use strict";
require("@babel/polyfill");
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
可以看出babel不处理模块化，只解析语法，模块化是Webpack的工作
4. babel-ployfill 按需引入
- 文件较大
- 只用一部分功能，无需全部引入
- 配置按需引入
在.babelrc文件中的preset数组里增加一个配置core-js：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
]
}
然后移除掉index.js中的polyfill手动导入:
import '@babel/polyfill'
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
重新使用babel处理,实现了按需引入：
"use strict";
require("core-js/modules/es.array.includes");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
5. babel-polyfill的问题
- 污染全局环境
// babel-polyfill的实现原理 window.Promise = function() { } Array.prototype.includes = function() { } // 使用方 window.Promise = 'abc' - 如果做一个独立的web系统，则无碍
- 如果做一个第三方lib，则会有问题
所以可以使用babel-runtime解决babel-polyfill污染全局变量的问题
三、babel-runtime
在.babelrc中配置babel-runtime
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
使用babel进行处理后结果如下：
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
require("@babel/polyfill");
var _context;
var sum = function sum(a, b) {
return a + b;
}; // 新的API
_promise["default"].resolve(100).then(function (data) {
return data;
});
(0, _includes["default"])(_context = [10, 20, 30]).call(_context, 20);
我们可以看到处理后的结果方法名前面加了下划线开头，就不再会污染全局变量了。