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

  

 

  
1
  
2
  
3
 

babel配置文件.babelrc ：

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    
  ]
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

基本使用：

src/index.js

const sum = (a, b) => a + b

  

 

  
1
 

执行命令：

yarn babel src/index.js

  

 

  
1
 

命令行输出结果：

"use strict";

var sum = function sum(a, b) {
  return a + b;
};

  

 

  
1
  
2
  
3
  
4
  
5
 

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) {
    // ......
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
 

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)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

使用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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

所以此时需要引入babel-polyfill

import '@babel/polyfill'
const sum = (a, b) => a + b

// 新的API
Promise.resolve(100).then(data => data);

[10, 20, 30].includes(20)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

进行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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

可以看出babel不处理模块化，只解析语法，模块化是Webpack的工作

4. babel-ployfill 按需引入

• 文件较大
• 只用一部分功能，无需全部引入
• 配置按需引入

在.babelrc文件中的preset数组里增加一个配置core-js：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
  ]
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

然后移除掉index.js中的polyfill手动导入:

import '@babel/polyfill'
const sum = (a, b) => a + b

// 新的API
Promise.resolve(100).then(data => data);

[10, 20, 30].includes(20)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

重新使用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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

5. babel-polyfill的问题

• 污染全局环境

  // babel-polyfill的实现原理
  window.Promise = function() {}
  Array.prototype.includes = function() {}
  
  // 使用方
  window.Promise = 'abc'
  
      
  
     
  
      
  1
      
  2
      
  3
      
  4
      
  5
      
  6
     

• 如果做一个独立的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
      }
    ]
  ]
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

使用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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

我们可以看到处理后的结果方法名前面加了下划线开头，就不再会污染全局变量了。

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/109350162