Внимательно прочтите Babel в одной статье

внешний интерфейс Babel

В процессе написания кода мы можем не ощущать существования Babel, но на самом деле, пока мы пишем код JS, Babel вездесущ и все время влияет на наш код, в основах Webpack мы просто вводим установку Babel, а также знать, что он может преобразовывать код ES6 высокой версии в код ES5 низкой версии.В этой статье мы подробно изучим и подведем итоги конфигурации и использования Babel.

Эта статья была впервые опубликована в публичном аккаунте【前端壹读】, для более интересного контента, пожалуйста, обратите внимание на последние новости официального аккаунта.

что такое бабель

Официальный сайт Babel определяет Babel как:

Babel — это компилятор JavaScript.

С точки зрения непрофессионала, он в основном используется для преобразования кода JavaScript высокой версии в код JS с обратной совместимостью, чтобы наш код мог работать в браузерах более низкой версии или других средах.

Например, мы используем стрелочные функции ES6 в нашем коде:

var fn = (num) => num + 2;

Но если мы запустим его с браузером IE11 (кто знает, какой браузер будет использовать пользователь), то появится ошибка, но код, скомпилированный Babel, может работать в IE11 и более ранних версиях браузера:

var fn = function fn(num) {
  return num + 2;
}

Babel выполняет такую ​​компиляцию и преобразование, поэтому нам не нужно рассматривать проблемы совместимости с браузерами, а нужно сосредоточиться только на написании кода.

История Вавилона

Предшественник Бабеля был из6to5Эта библиотека была разработана из6to5Автор — австралийский инженер Facebook.Sebastian McKenzieОн был выпущен в 2014 году, из его названия также видно, что основной функцией является преобразование ES6 в ES5.Мы все еще можем видеть этот пакет на официальном сайте npm, но автор предполагает, что он был перенесен на Babel:

6to5.png

В январе 2015 г.6to5а такжеEsnextкоманд решили разрабатывать вместе6to5, и переименовалиBabel, движок парсинга переименованBabylon

Вавилон и Вавилон значение

  • Перевод Вавилона - Вавилон, что означает вавилонская цивилизация.
  • Перевод Вавилон - Вавилонская башня, также известная как Вавилонская башня; люди на земле говорили в то время на одном языке, и когда люди ушли с востока, они пришли в землю Сеннаар. Там люди находят способы сжигать кирпичи, чтобы построить город и высокую башню, чтобы прославить свое имя, чтобы они не рассеялись по всему миру. Бог пришел в мир и увидел этот город и эту башню, и после группы людей, которые говорили только на одном языке, не было ничего, что они не могли бы сделать; поэтому Бог перепутал их языки, чтобы они не могли понять друг друга После того, что они сказали, они рассеяли их по всему свету, и строительство башни остановилось, и башню назвали «Вавилонской башней».

Вавилонская версия и отличие

  • 15.02.2015, 6to5 переименован в babel
  • 31 марта 2015 г., выпуск версии 5.0
  • 2015-10-30, выпуск версии 6.0
  • 27 августа 2018 г., выпуск версии 7.0

Babel5 и ранее представлял собой набор инструментов для сбора, содержащий инструменты CLI + компиляторы + конвертеры; после babel6 он был разделен, и пакет коллекции был разделен на несколько пакетов:

  • babel-cli, который содержит интерфейс командной строки babel
  • babel-core, включая API-интерфейсы, связанные с Node, и требующие перехватчиков
  • babel-polyfill, может создать полную среду ES2015

Babel6 по умолчанию не содержит никаких конвертеров, вам нужно установить необходимые плагины и конвертеры самостоятельно.babel-xxxустановить соответствующий инструментарий.

И Babel7 использует приватную область npm для монтирования всех пакетов.@babelвниз, сквозь@babel/xxxЧтобы установить, не смотрите кучу пакетов babel-xxx в node_modules.

В этой статье в качестве инструмента разработки в основном используется Babel7.

@babel/core и @babel/cli

@babel/core Мы видели его во многих местах. Это основной пакет зависимостей для транскодирования Babel. От него зависят наши часто используемые babel-cli и babel-node. Давайте рассмотрим пример, чтобы увидеть, как он анализируется (соответствующий код есть в demo0):

var babelCore = require("@babel/core");
var sourceCode = `let fn = (num) => num + 2`;

var options = {
  //是否生成解析的代码
  code: true,
  //是否生成抽象语法树
  ast: true,
  //是否生成sourceMap
  sourceMaps: true,
  plugins: [],
  presets: [],
};

babelCore.transform(sourceCode, options, function (err, result) {
  console.log(sourceCode);
  console.log(result.code);
  console.log(result.map);
  console.log(result.ast);
});

babel-core.png

Можно обнаружить, что исходная стрелочная функция es6 возвращается в результате практически без изменений; режим работы Babel можно разделить на три этапа: парсинг, трансформация и генерация; за этап парсинга отвечает плагин@babel/parser, функция которого состоит в том, чтобы разобрать исходный код в AST, а плагин, отвечающий за фазу генерации,@babel/generator, его роль заключается в регенерации кода из преобразованного AST.

А сам @babel/core не имеет функции обработки преобразования, он разбивает функцию преобразования на плагины один за другим, поэтому, когда мы не добавляем никаких плагинов, входной и выходной коды совпадают.

Есть несколько побочных продуктов преобразования @babel/core: код, мачта и карта, которые мы можем передатьoptionsконфигурацию и выборочно выводить эти побочные продукты по мере необходимости. КромеtransformЭтот метод преобразования иtransformSync,transformAsyncа такжеtransformFileSyncи другие синхронные и асинхронные API, которые можно найти вофициальный сайт бабельоказаться.

​@babel/cliBabel поставляется со встроенным инструментом командной строки CLI, и мы можем компилировать файлы через командную строку, у него есть два метода вызова, которые можно вызывать через глобальную установку или локальную установку, и один из них можно выбрать. локально в проекте.

//全局安装调用
npm install --g @babel/cli
babel index.js -o output.js
//本地安装调用
npm install --save-dev @babel/cli
npx babel index.js -o output.js

​@babel/cliВы также можете использовать следующие параметры команды:

Параметры команды Сокращенное название эффект Пример
--out-file -o имя выходного файла babel a.js -o b.js
--watch -w Мониторинг вывода в режиме реального времени babel a.js -o b.js -w
--source-maps -s выходной файл карты babel a.js -o b.js -s
--source-maps inline -s inline Встроенная исходная карта babel a.js -o b.js -s inline
--out-dir -d папка сборки babel src -d dist
--ignore без игнорировать определенные файлы babel src -d dist --ignore src/**/*.spec.js
--copy-files без Скопируйте файлы, которые не нужно компилировать babel src -d dist --copy-files
--plugins без Указывает на использование плагинов babel a.js -o b.js --plugins @babel/plugin-transform-arrow-functions
--presets без указать использование по умолчанию babel src -d dist --presets @babel/preset-env

​@babel/cliКонкретное использование командной строки находится вdemo1

конфигурационный файл

Хотя мы можем настраивать различные плагины (плагины) или пресеты (пресеты, то есть набор плагинов) в командной строке, это не способствует последующему просмотру или обслуживанию, и большую часть времени babel упакован с помощью webpack или gulp, и т. д. Разработка инструментов не будет производиться напрямую через командную строку, поэтому Babel рекомендует управлять через конфигурационные файлы.

Узнайте больше о содержимом веб-пакета, добро пожаловать, чтобы ответить на ключевые слова в официальном аккаунте.webpack

Файлы конфигурации Babel в основном включают.babelrc,.babelrc.js,babel.config.jsа такжеpackage.json, параметры конфигурации у них одинаковые, и функции одинаковые.Главное отличие заключается в синтаксисе форматов, поэтому нам нужно выбрать только один из них в проекте.

для.babelrc, его конфигурация в основном в формате JSON, например:

{
  "presets": [...],
  "plugins": [...]
}

а также.babelrc.jsа такжеbabel.config.jsТакой же синтаксис JS, конфигурация вывода через module.exports:

module.exports = function (api) {
  api.cache(true);
  const presets = [ ... ];
  const plugins = [ ... ];
  if (process.env["ENV"] === "prod") {
    plugins.push(...);
  }
  return {
    presets,
    plugins
  };
}

Мы также можем динамически настраивать в соответствии со средой. пока вpackage.json, нужно увеличитьbabelсвойства:

{
  "name": "demo",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

Мы можем добавить некоторые плагины или пресеты в файл конфигурации, чтобы расширить функцию преобразования @babel/core; нам нужно только добавить в массив имя соответствующего плагина или пресета; например, наши часто используемые стрелочные функции ES6 создаются через@babel/plugin-transform-arrow-functionsЭтот плагин для конвертации:

//.babelrc
{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

Но иногда нам нужно задать параметры для плагинов и пресетов, поэтому мы не можем использовать форму строк напрямую, вместо этого мы должны обернуть еще один слой массива, первый элемент массива — это имя, а второй элемент является объектом заданного параметра:

//.babelrc
{
  "plugins": [
    [
      "@babel/plugin-transform-arrow-functions", 
      { "spec": true }
    ]
  ]
}

Так что мы сможем функционировать правильно преобразованную стрелку, соответствующий кодdemo2

Плагины и пресеты Babel

Плагины Babel можно условно разделить на语法插件а также转换插件:

  • Плагин грамматики: действует на этапе синтаксического анализа, позволяя Babel анализировать больше грамматик.babel-plugin-syntaxначало.
  • Подключаемый модуль преобразования: на этом этапе исходный код и выходные данные преобразования преобразуются в официальный подключаемый модуль для преобразованияbabel-plugin-transform(формальный)或 babel-plugin-proposal(предложение) в начале.

Плагин преобразования активирует соответствующий плагин синтаксиса, поэтому нет необходимости указывать оба.

Плагины синтаксиса называются плагинами, но сами по себе они не функциональны. Грамматические функции, соответствующие плагинам грамматики, на самом деле уже находятся в@babel/parserФункция плагина — открыть функцию разбора соответствующей грамматики. Таким образом, плагин Babel, упомянутый в этой статье, будет относиться конкретно к плагину конвертации.

Официальный сайт Babel предоставляет почти сотню плагинов, но если мы будем настраивать плагины один за другим в нашем коде, нам нужно знать о каждом плагине, что неизбежно отнимет много времени и сил, для этого Babel предоставляет пресеты (пресеты). )концепт, который означает серию предустановленных вставных пакетов; это эквивалент пакета в KFC, объединяющего множество продуктов для удовлетворения потребностей разных групп людей; всегда есть пакет, который нам подходит.

Например@babel/preset-es2015Он используется для преобразования части синтаксиса ES6 в синтаксис ES5,@babel/preset-stage-xСинтаксис js на определенном этапе может быть скомпилирован в официальную версию кода js, и@babel/preset-stage-xОт нее тоже отказалась Babel.Заинтересованная детская обувь может прочитать эту статьюофициальная статья

На самом деле пресеты, которые мы будем использовать, следующие:

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

По названию можно примерно предположить сценарий использования каждого пресета, давайте сосредоточимся на понимании@babel/preset-env, его роль заключается в преобразовании кода в соответствии со средой.

исполнительный лист

И плагины, и пресеты настраиваются в конфигурационном файле в виде массивов, если и плагинам, и пресетам нужно обработать один и тот же фрагмент кода, они будут определяться по следующим правилам выполнения:

  • Плагины выполняются перед пресетами
  • Порядок выполнения плагинов таков, что массив плагинов выполняется спереди назад.
  • Порядок выполнения по умолчанию таков, что предустановленный массив выполняется сзади наперед

@babel/preset-env

Давайте взглянем на его описание на официальном сайте:

@babel/preset-env — это интеллектуальная предустановка, позволяющая использовать последнюю версию JavaScript без микроуправления преобразованиями синтаксиса (и необязательными полифиллами браузера), необходимыми для целевой среды. Все это делает вашу жизнь проще, а пакет JavaScript меньше!

Мы не заботимся о Babel в проекте, с помощью которых плагины, которые поддерживают синтаксис ES6; мы более обеспокоены тем, какие версии браузера поддерживают этот уровень, например, мы используем функцию стрелки в проекте, классе, Const и String. :

let fun = () => console.log("hello babel.js");
class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`my name is：${this.name}`);
  }
}
const tom = new Person("tom");
tom.say();

Но если нашему проекту нужна поддержка IE10, нам нужно изменить.babelrc:

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

или, сокращая его:

{
  "presets": ["@babel/env"]
}

Вывод после компиляции с помощью Babel:

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var fun = function fun() {
  return console.log('hello babel.js');
};

var Person = /*#__PURE__*/function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  _createClass(Person, [{
    key: "say",
    value: function say() {
      console.log("my name is\uFF1A".concat(this.name));
    }
  }]);

  return Person;
}();

var tom = new Person('tom');
tom.say();

Можно обнаружить, что, хотя мы не настроили никаких плагинов преобразования, стрелочная функция, Class, Const и синтаксис строки шаблона, написанные выше, были преобразованы; по умолчанию @babel/env равен @babel/preset-es2015, @babel Наложение трех пакетов /preset-es2016 и @babel/preset-es2017.

Затем, если нам нужно поддерживать только последнюю версию Chrome, мы можем продолжить модифицировать.babelrc:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "last 2 Chrome versions"
      }
    ]
  ]
}

Значение в target — две последние версии Chrome, и Babel снова компилирует вывод:

"use strict";

let fun = () => console.log("hello babel.js");

class Person {
  constructor(name) {
    this.name = name;
  }

  say() {
    console.log(`my name is：${this.name}`);
  }

}

const tom = new Person("tom");
tom.say();

Последняя версия Chrome уже поддерживает стрелочные функции, Class, Const и шаблонные строки, поэтому они не будут преобразованы во время компиляции. Соответствующий код находится вdemo3.

надtargetМногие студенты в этой области должны выглядеть знакомыми.Этот инструмент может быть автоматически настроен в соответствии с целевым браузером, указанным в проекте.Мы не будем подробно обсуждать его здесь, его также можно настроить отдельно в проекте..browserslistrcдокумент:

last 2 Chrome versions

Это имеет тот же эффект, что и поле target; при нормальных обстоятельствах рекомендуется использовать конфигурацию browserslist и редко настраивать цели @babel/preset-env отдельно; @babel/preset-env имеет некоторые часто используемые элементы конфигурации, давайте взгляните один раз:

targets

Хотя target не рекомендуется, давайте посмотрим на его использование.Он используется для описания целевой среды браузера, которую мы хотим поддерживать в проекте.Это может быть запрос в формате Browserslist:

{
  "targets": "> 0.25%, not dead"
}

Или может быть объектом, описывающим минимальную поддерживаемую версию браузера:

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

Другие версии браузера также могут быть:opera,edge,firefox,safari,ios,android,node,electronЖдать

spec

Это свойство в основном используется для передачи параметров другим плагинам (например, @babel/plugin-transform-arrow-functions). По умолчанию установлено значение false. После установки значения true наши стрелочные функции изменятся следующим образом:

  1. Используйте функцию, сгенерированную стрелочной функцией, с.bind(this)Оберните это, чтобы продолжать использовать this внутри функции вместо переименования this.
  2. Добавьте проверку, чтобы предотвратить создание экземпляра функции.
  3. Добавьте имя к функции стрелки

loose

Это свойство также в основном используется для передачи параметров другим плагинам (таким как @babel/plugin-transform-classes). По умолчанию установлено значение false, и метод класса определяется непосредственно в конструкторе; если установлено значение true, метод класса определен в прототипе, что может вызвать проблемы с наследованием классов.

include

Массив плагинов, которые всегда будут включены при конвертации, в форматеArray<string|RegExp>, который может принимать одно из следующих двух значений:

  1. Плагин Бабель
  2. Встроенный core-js, напримерes.map,es.setЖдать

Например, мыlast 2 Chrome versionsВ среде целевого браузера стрелочные функции и классы не будут преобразованы, но мы можем настроить подключаемый модуль, который преобразует стрелочные функции во включаемые, так что независимо от того, как изменится наш целевой браузер, синтаксис стрелочных функций всегда будет преобразовываться:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "last 2 Chrome versions",
        "include": ["@babel/plugin-transform-arrow-functions"]
      }
    ]
  ]
}

useBuiltIns и corejs

​useBuiltInsЭто свойство определяет, следует ли вводить полифиллы.Можно настроить три значения: false (не импортируется), использование (вводится по запросу) и вход (вводится при входе в проект);corejsУказывает, какая версия core-js введена. Вы можете выбрать 2 (по умолчанию) или 3. Это вступит в силу, только если useBuiltIns не равно false.

@babel/polyfill

Хотя @babel/preset-env может преобразовывать самые продвинутые версии синтаксиса JS, некоторые функции в цепочке прототипов ES6 (например, фильтрация, заполнение, поиск и другие функции для экземпляров массива) и новые встроенные объекты (такие как Promise, Proxy ) и т. д.), младшая версия самого браузера их не поддерживает, поэтому @babel/preset-env ничего с ними поделать не может.

Например, наша часто используемая функция фильтра будет иметь проблемы с совместимостью в браузерах IE, поэтому мы решаем ее с помощью полифилла (shims).Ниже приведен простой совместимый код функции фильтра:

if (!Array.prototype.filter) {
  Array.prototype.filter = function (fun /*, thisp*/ ) {
    var len = this.length;
    if (typeof fun != "function") {
      throw new TypeError();
    }
    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
      if (i in this) {
        var val = this[i];
        if (fun.call(thisp, val, i, this)) {
          res.push(val);
        }
      }
    }
    return res;
  };
}

Но в ES так много функций и встроенных объектов, что мы не можем решить их все вручную, так что вот мы@babel/polyfillВот где он появляется; сначала нам нужно установить его в наш проект:

npm install --save @babel/polyfill

После завершения установки добавьте код ссылки в запись файла, который нужно преобразовать:

import '@babel/polyfill'

​илиМы также можем импортировать в точку входа Webpack:

module.exports = {
  entry: ["@babel/polyfill", "./src/index.js"],
};

Затем упакуйте его через веб-пакет, чтобы вы могли видеть, что в наш код добавлено много совместимого кода.Соответствующий код находится вdemo4:

polyfill-bundle

Выяснилось, что методы fill, filter и findIndex нашего массива все запакованы, но увидев столько совместимых кодов, зоркие детские ботиночки обязательно найдут следующие две проблемы:

  1. Упакованные файлы очень большие; есть некоторые грамматические особенности, которые мы можем не использовать, но Webpack ссылается на них все, что приводит к очень большим упакованным файлам.
  2. Загрязнять глобальные переменные, polyfill добавляет функции в цепочку прототипов многих классов.Если мы разработаем библиотеку классов для использования другими разработчиками, эта ситуация станет очень неконтролируемой.

Поэтому изBabel7.4Запуск @babel/polyfill не рекомендуется, но вводится напрямуюcore-jsа такжеregenerator-runtime两个包；而@babel/polyfill本身也是这两个包的集合；在上面webpack打包出来的dist文件我们也可以看到，引用的也是这两个包。 Этоcore-jsчто это такое?

  • Это полифилл для стандартной библиотеки JavaScript.
  • Он максимально модульный, что позволяет вам выбрать нужный вам функционал.
  • Он тесно интегрирован с babel и может максимально оптимизировать внедрение core-js.

В настоящее время по умолчанию мы используемcore-js@2, но он заблокировал ветку и фичи после этого будут добавляться только вcore-js@3, поэтому также рекомендуется использовать последнююcore-js@3.

@babel/preset-env с core-js

В приведенной выше конфигурации @babel/preset-env есть два свойства, useBuiltIns и corejs, которые используются для управления требуемой версией core-js, в качестве примеров возьмем Object.assign, filter и Promise, соответствующий код находится вdemo5:

Object.assign({}, {});

[(1, 5, 10, 15)].filter(function (value) {
  return value > 9;
});

let promise = new Promise((resolve, reject) => {
  resolve(1);
});

Затем измените файл конфигурации, если мы будемuseBuiltInsНастроенный на non-false без указания версии corejs, Babel предложит нам настроить версию corejs:

env-corejs

Придерживаясь принципа использования нового вместо старого, решительно выбирайтеcore-js@3:

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

Вы можете видеть, что наш упакованный файл автоматически вводит модули в core-js:

"use strict";

require("core-js/modules/es.array.filter");

require("core-js/modules/es.object.assign");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.promise");

Object.assign({}, {});
[(1, 5, 10, 15)].filter(function (value) {
  return value > 9;
});
var promise = new Promise(function (resolve, reject) {
  resolve(1);
});

И мы обнаружили, что он ввел только некоторые модули; это более мощно, оно не только будет учитывать новые функции, используемые в коде, но и ссылаться на среду целевого браузера для внедрения по требованию; и установлен useBuiltIns Все модули в core-js будут представлены на входе и здесь демонстрироваться не будут.

@babel/runtime

Когда мы преобразовали класс Class через @babel/preset-env выше, мы обнаружили, что в заголовке выходного файла есть три объявления функций _classCallCheck, _defineProperties и _createClass, Это встроенная функция, называемая辅助函数; @babel/preset-env вводит объявления функций при преобразовании для использования после преобразования синтаксиса.

Но когда мы разрабатываем проект, файлов всего несколько десятков или сотен.Если каждый файл внедрить с объявлением функции, выходной файл будет очень большим после упаковки инструментом упаковки, что повлияет на производительность.

Поэтому решение, которое предлагает Babel, состоит в том, чтобы поместить эти вспомогательные функции в пакет npm и помещать функции из этого пакета каждый раз, когда их нужно использовать.requireТаким образом, даже если есть тысячи файлов, вместо копирования кода используются ссылки на функции; наконец, при упаковке с помощью таких инструментов, как веб-пакет, только функции, на которые есть ссылки в пакете npm, будут упакованы один раз, таким образом повторно используется код. уменьшение размера упакованного файла.

@babel/runtime представляет собой набор этих вспомогательных функций.Мы смотрим на вспомогательные функции в @babel/runtime и обнаруживаем, что многие функции экспортируются, а также функция _classCallCheck, о которой мы упоминали выше:

babel-runtime

В первую очередь, конечно, нужно установить пакет @babel/runtime, дополнительно нужно установить @babel/plugin-transform-runtime, функция этого плагина — удалить вспомогательную функцию и заменить ее на функция в цитатах @babel/runtime/helpers.

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

Затем измените наш файл конфигурации, соответствующий код находится вdemo6:

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

После повторной упаковки мы обнаружили, что наша вспомогательная функция стала следующим эталонным методом:

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

@babel/plugin-transform-runtime

Выше мы упоминали, что @babel/polyfill создаст полную среду ES2015, что приведет к загрязнению глобальных переменных; хотя использование core-js не введет все модули, оно также загрязнит некоторые глобальные переменные.

И @babel/plugin-transform-runtime может не только преобразовать вышеуказанные вспомогательные функции, но и преобразовать API новой функции в код.В качестве примера возьмем нашу функцию фильтра и объект Promise, соответствующий код находится вdemo7:

[1, 5, 10, 15].filter((value) => {
  return value > 9;
});
let promise = new Promise((resolve, reject) => {
  resolve(1);
});

Затем измените наш файл конфигурации .babelrc:

{
  "presets": ["@babel/env"],
  "plugins": [
    [
      "@babel/transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

Снова взглянув на упакованный файл, мы обнаруживаем, что filter и Promise были преобразованы в ссылки:

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var _context;

(0, _filter["default"])(_context = [1, 5, 10, 15]).call(_context, function (value) {
  return value > 9;
});
var promise = new _promise["default"](function (resolve, reject) {
  resolve(1);
});

Мы обнаружили, что упакованный модуль из@babel/runtime-corejs3Упоминается в этом пакете; после проверки обнаружено, что он содержит три папки: core-js, helpers и regenerator, поэтому мы можем найти:

@babel/runtime-corejs2 ≈ @babel/runtime+core-js+regenerator ≈ @babel/runtime+@babel/polyfill

Разница между @babel/polyfill и @babel/runtime

После стольких приведенных ниже примеров резюмируйте разницу между @babel/polyfill и @babel/runtime: первый преобразует целевой браузер, так что ваш браузер имеет функции, которые изначально не поддерживаются; последний преобразует ваш код, чтобы ваш код мог Работает во всех целевых браузерах, но не модернизирует браузеры.

Очевидная разница заключается в том, чтобы открыть браузер IE 11. Если вводится @babel/polyfill, мы можем выполнить Object.assign({}, {}) в консоли, а если вводится @babel/runtime, вам будет предложено сообщить ошибка, т.к. на Object нет функции assign.

Готово разбрасывание цветов, это не просто создать, надеюсь, что после просмотра вы будете смотреть сериал из трех пунктов (лайк, любимый, следите)

Автор рекомендует:

Полный анализ конфигурации Webpack (оптимизация)

Полный анализ конфигурации Webpack (базовый)

Для получения дополнительной информации о внешнем интерфейсе, пожалуйста, обратите внимание на общедоступный номер【前端壹读】.

Если вы думаете, что это хорошо написано, пожалуйста, следуйте за мнойДомашняя страница Наггетс. Для получения дополнительных статей, пожалуйста, посетитеБлог Се Сяофэй

Категории