欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Babel在面试过程中的考点

程序员文章站 2022-03-23 11:18:49
Babel在面试过程中的考点Babel功能:解析JS新语法,转化成低版本语法供浏览器使用。一、环境搭建 & 基本配置yarn init -yyarn add @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -Dyarn add @babel/polyfill @babel/runtimebabel配置文件.babelrc :{ "presets": [ [ "@b...

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-jsregenerator的集合

1. Polyfill是一种JS的语法补丁方案。

比如说有些低版本的IE浏览器不支持Array.indexOf,那么就可以在网上找一个Array.indexOfPolyfill放到项目中,处理浏览器兼容性问题

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {
    // ......
  }
}

2. core-js是官方提供的ES6ES7等新语法的Polyfill集合

3. regeneratorgenerator语法的Polyfill

Babel 7.4 之后弃用babel-polyfill,推荐直接使用core-jsregenerator

babelpreset-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);

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

本文地址:https://blog.csdn.net/jal517486222/article/details/109350162