El sitio de prueba de Babel durante la entrevista

El sitio de prueba de Babel durante la entrevista

Función de Babel: analiza la nueva gramática JS y conviértela en una gramática de versión inferior para el uso del navegador.

1. Configuración del entorno y configuración básica

yarn init -y
yarn add @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/polyfill @babel/runtime

babelArchivo de configuración .babelrc:

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

Uso básico:

src / index.js

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

Ejecución de una orden:

yarn babel src/index.js

Salida de la línea de comando:

"use strict";

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

babelEs un shell vacío en sí mismo, es solo una herramienta de proceso. La razón por la que se puede ES6convertir en ES5gramática es pluginla función de cada uno , y se necesitan plugindemasiadas palabras , lo cual es difícil de recordar. Por lo tanto, el presetplan predeterminado presetes pluginreconstruir muchos hacen un paquete de un nombre, como por ejemplo preset-env, preset-flow, preset-react, preset-typescript, preset-envque contiene una gran cantidad de conversión de ES6sintaxis plugin, si no es suficiente, entonces también se puede configurar individuoplugin

---

二 、 babel-polyfill

babel-polyfillEs decir, core-jsy regeneratorcolecciones

1. PolyfillEs un JSprograma de parcheo gramatical.

Por ejemplo, si algunos navegadores IE de bajo nivel no son compatibles Array.indexOf, puede encontrar uno en Internet Array.indexOfy Polyfillponerlo en el proyecto para solucionar los problemas de compatibilidad del navegador.

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

2. El core-jsoficial proporcionada ES6, ES7nuevo y otra gramática Polyfillcolección

3. regeneratores generatorgramaticalPolyfill

Babel 7.4En desuso más adelante babel-polyfill, se recomienda utilizar core-jsyregenerator

babelEs preset-envposible que no conviertan la nueva API, porque ya cumplen con la ES5especificación de sintaxis de sintaxis, por ejemplo:

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

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

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

Después de procesar con 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);

Entonces necesitas presentarbabel-polyfill

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

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

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

Después de la conversión de 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);

Se puede ver que babelno se ocupa de la modularización, solo analiza la gramática, y la modularidad es Webpackel trabajo

4. Babel-ployfill se introduce bajo demanda

• Tamaño del archivo
• Utilice solo una parte de la función, no es necesario introducir todas
• Configurar la introducción a pedido

Agregue una configuración .babelrca la presetmatriz en el archivo core-js:

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

Luego elimine index.jsla polyfillimportación manual en:

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

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

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

babelProcesamiento de reutilización , introducción bajo demanda realizada:

"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. problema de babel-polyfill

• Contaminar el medio ambiente global

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

• Si crea un sistema web independiente, no le vendrá mal
• Si crea una biblioteca de terceros, habrá problemas

Entonces puedes usar para babel-runtimeresolver el problema de la babel-polyfillcontaminación de variables globales

---

三 、 babel-runtime

En .babelrcla configuraciónbabel-runtime

{
    
    
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
    
    
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

Los babelresultados después del uso para el procesamiento son los siguientes:

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

Podemos ver que el nombre del método del resultado procesado está precedido por un guión bajo, que ya no contaminará las variables globales.