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