Как именно работает Babel Polyfill?

JavaScript
Как именно работает Babel Polyfill?

предисловие

Чтобы поддержать небольшое количество расширенных функций es6+ в бизнесе, я недавно исследовал прокладки babel, которые теперь организованы в виде текста следующим образом. (Эта статья призвана объяснить взаимосвязь и использование babel и связанных с ним пакетов, а также сценарии приложений.)

13.02.2020 Первое обновление: Babel-polyfill против Babel-плагинов

Отношения между Babel и Babel ployfill

1. Давайте сначала разберемся, что делает Babel?

просто говоря,babelрешитьграмматические проблемы. дляРасширенный синтаксис ES6+ для ES5.

2. Что делает babel polyfill?

Если вы хотите решитьПроблемы на уровне API, нужны шайбы. такие как общиеbabel-polyfill,babel-runtimeа такжеbabel-plugin-transform-runtime.

Выяснив отношения между ними, давайте поговорим об этом формально.polyfillдве-три вещи.

Типы полифиллов

Есть три полифилла babel

* babel-polyfill
* babel-runtime
* babel-plugin-transform-runtime

babel-polyfill

babel-polyfillЭто достигается путем добавления методов к прототипам глобальных объектов и встроенных объектов. Так что это вызоветглобальное космическое загрязнение.

babel-polyfillДва способа использования

1. В webpack.config.js: настроитьwebpack.config.jsвнутреннийentryУстановить какentry: ['babel-polyfill',path.join(__dirname, 'index.js')]

2. В бизнес-js: существуетwebpack.config.jsНастроена основная записьindex.jsтип файла верхнего уровня

import 'babel-polyfill'

Оба распечатывают один и тот же размер, а упакованный размер280KB, если не используетсяbabel-polyfill, размер3.43kb. Разница между двумя81,6 раза. Причина в том,webpackПучокbabel-polyfillВсе дело упаковано. а такжеbabel-polyfillопределенно добился всегоES6新APIПрокладка, файл не должен быть маленьким.

Так есть ли способ, в соответствии с фактическим используемым кодомES6新增API ,来使用对应的垫片,而不是全部加载进去呢? Да, есть. То естьbabel-runtime & babel-plugin-transform-runtime, они могут быть загружены по запросу.

babel-runtime

Проще говоря, babel-runtime больше похож на реализацию загрузки по требованию, например, там, где вам нужно использовать Promise, просто добавьте заголовок этого файла

import Promise from 'babel-runtime/core-js/promise'

Вот и все.

Но если вы используете промисы для многих файлов, разве вам не нужно использовать промисы для каждого файла?importна мгновение? Конечно нет, Babel официально рассматривал эту ситуацию, просто используйтеbabel-plugin-transform-runtimeможно решить вручнуюimportбедствия.

babel-plugin-transform-runtime

babel-plugin-transform-runtimeНет необходимости устанавливатьbabel-runtime, так как первое зависит от второго. В основном,babel-plugin-transform-runtimeэто когда мы используем новый APIАвтоматически импортировать полифиллы в среде выполнения Babel, конкретный подключаемый модуль выполняет следующие три функции:

  • Когда мы используем async/await, автоматически вводится babel-runtime/regenerator
  • Когда мы используем статические события или встроенные объекты ES6, автоматически импортируется babel-runtime/core-js.
  • Удалите встроенные помощники babel и замените на babel-runtime/helpers.

babel-plugin-transform-runtimeпреимущество:

  • Не загрязняет глобальные переменные
  • Многократное использование будет упаковано только один раз
  • Зависимость равномерно импортируется по запросу, без повторного импорта, без избыточного импорта
  • Избегайте повторения служебных функций, скомпилированных с помощью Babel, в каждом модуле, уменьшая размер библиотек и наборов инструментов.

Как использовать

Настройте в .babelrc:

plugins: ["tranform-runtime"]

После упаковки размер17.4kb, чем предыдущий280kbзначительно меньше.

Плагин

1. Официальные пресеты

Если вы не хотите сами настраивать кучу плагинов, у официалов естьenv,react,flowТри предустановки. То есть конфигурация с предустановленными плагинами.

Атрибут Presets рассказывает Babel, какие новые функции синтаксиса используются в исходном коде для преобразования. Предустановки - это коллекция плагинов. Такие как:

babel-preset-es2015: может компилировать код es6 в es5
babel-preset-es2016: может компилировать код es7 в es6
babel-preset-es2017: может компилировать код es8 в es7
babel-preset-latest: поддерживает новые функции во всех существующих версиях ECMAScript.

Когда нам нужно преобразовать синтаксис es6, мы можем добавить следующие плагины по мере необходимости в плагины .babelrc, например:check-es2015-constants,es2015-arrow-functions,es2015-block-scoped-functionsИ так далее десятки плагинов с разными функциями..babelrcЭлементы конфигурации могут быть следующими:

{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

Но для удобства команда Babel собрала десятки плагинов Transform, принадлежащих ES2015, вbabel-preset-es2015Предустановка, поэтому нам нужно только.babelrcПредустановки ES2015 можно добавить в конфигурацию ES2015, чтобы завершить поддержку всего синтаксиса ES2015..babelrcКонфигурация выглядит следующим образом:

{
  "presets": [
    "es2015"
  ]
}

2. Stage-X (экспериментальные пресеты)

Это легко понять, это пресеты, разработанные для поддержки TC39 для последних функций ES на стадии драфта.

  • Этап 0 — Черновик: просто идея может быть плагином для Babel
  • Этап 1. Предложение: что-то стоящее продвижения вперед
  • Этап 2 — черновик: спецификация инициализации
  • Этап 3 — кандидат: полная спецификация и начальная реализация браузера
  • Этап 4 - Завершение: будет добавлено в следующую версию

3. Плагин конвертации

Официальные лица и люди предоставляют множество плагинов для преобразования, чтобы указать синтаксический анализ и преобразование определенных расширенных функций ES, таких как функции стрелок. Официально см.:Babel находится в .IO/docs/en/run...

это полифилл с бабелемразницаДа:

4. Плагин грамматики

Этот плагин позволяетBabelдля разбора специальных типов грамматик.

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

5. Разработка плагинов

См. документацию:GitHub.com/Джейми строит…

В разработке используется абстрактное синтаксическое дерево AST, аналогичное разработке плагинов Eslint.

export default function () {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split("").reverse().join("");
      }
    }
  };
}

Примечания по использованию babel в webpack

Цель Babel - это синтаксическое преобразование, поэтому его необходимо использовать в WebPackbabel-loader. а такжеbabel-coreявляется ядром компилятора Babel, поэтому это означает, что если нам нужно использоватьbabel-loaderДля транскодирования es6 нам сначала нужно установитьbabel-core.

Суммировать

Предлагаемые сценарии использования:

  • Для разработки приложений рекомендуется использовать babel-polyfill, который добавит соответствующие методы глобально
  • Среда разработки рекомендует, чтобы локальные переменные babel-plugin-transform-runtime не загрязняли глобальные и использовали функции или методы es6 локально.

Если вышеуказанное неверно или у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение.

Продолжение следует, эта статья продолжит обновлять знания о Babel.

Категории