Babel在面试过程中的考点

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