Скачать Babel Polyfills - Скачать исходный код Babel Polyfills

Вавилонские полифилы

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

Этот репозиторий реализует то, что изначально было предложено в Babel/babel#10008.

Если вы ищете примеры быстрой настройки или просто хотите узнать, как перенести конфигурацию, проверьте docs/migration.md .

Использование

Основные пакеты Babel только преобразуют синтаксис JavaScript: вам также необходимо загрузить полифилл, чтобы встроенные функции ( Array.prototype.flat ) или встроенные объекты ( Reflect ) работали в старых браузерах.

Самый простой способ сделать это — напрямую загрузить полифил с помощью тега ">

 < script src =" https://unpkg.com/[email protected]/minified.js " >  script >

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

Эти плагины (мы называем их «поставщиками полифилов») поддерживают различные методы внедрения, чтобы лучше соответствовать вашим потребностям.

Например, если вы хотите внедрить импорт в полифилы es-shims , добавив недостающие функции к глобальным объектам, вы можете настроить Babel следующим образом:

 Конфигурация  Входной код  Выходной код 
{
  "targets" : { "firefox" : 65 },
  "plugins" : [
    [ " polyfill-es-shims " , {
      "method" : " usage-global "
    }]
  ]
}
 Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ;  {
  console.log("Done!");
});"> import "promise.prototype.finally/auto" ;
import "promise.allsettled/auto" ;

Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ; Если вы хотите увидеть больше примеров конфигурации, вы можете проверить документацию по миграции: docs/migration.md .
 Если вам интересно узнать обо всех опциях, поддерживаемых этими плагинами, вы можете проверить документацию по использованию: docs/usage.md .
 Поддерживаемые полифилы
 Полифилл  Плагин  Методы
 core-js@2  babel-plugin-polyfill-corejs2  entry-global , usage-global и usage-pure
 core-js@3  babel-plugin-polyfill-corejs3  entry-global , usage-global и usage-pure
 es-shims  babel-plugin-polyfill-es-shims  usage-global и usage-pure
 regenerator-runtime  babel-plugin-polyfill-regenerator  entry-global , usage-global и usage-pure Мы сохраняем поддержку core-js и es-shims , но рекомендуем вам реализовать поставщик для вашего собственного полифила или для вашего любимого! Одна из наших целей — стимулировать конкуренцию между различными полифилами, чтобы лучше сбалансировать различные компромиссы, такие как соответствие спецификациям и размер кода.
 Если вы хотите реализовать поддержку пользовательского полифила, вы можете использовать @babel/helper-define-polyfill-provider . ( docs/polyfill-provider.md .) 
 Методы инъекции
 Плагины Polyfill могут предоставлять три различных метода внедрения: entry-global , usage-global и usage-pure . Обратите внимание, что плагины-полифилы не добавляют автоматически необходимые пакеты к вашим зависимостям, поэтому вы должны явно указать их в своем package.json .
 Во всех примерах предполагается, что вы ориентируетесь на Chrome 62.
 entry-global заменяет один простой импорт всего полифила импортом определенных функций, не поддерживаемых целевыми средами. Это наиболее полезно, когда вы хотите быть уверены, что каждая неподдерживаемая функция доступна, независимо от того, что вы используете в коде, который компилируете с помощью Babel. Возможно, вам захочется использовать этот метод, если:
 вы не компилируете свои зависимости, но хотите быть уверены, что в них есть все необходимые полифилы;
 Логика обнаружения Babel недостаточно умна, чтобы понять, какие функции вы используете;
 вы хотите иметь один связанный файл, содержащий все полифилы, без необходимости его повторного создания при изменении кода.
 Входной код  Выходной код 
 import "core-js" ;  import "core-js/modules/es7.array.flat-map.js" ;
import "core-js/modules/es6.array.sort.js" ;
import "core-js/modules/es7.promise.finally.js" ;
import "core-js/modules/es7.symbol.async-iterator.js" ;
import "core-js/modules/es7.string.trim-left.js" ;
import "core-js/modules/es7.string.trim-right.js" ;
import "core-js/modules/web.timers.js" ;
import "core-js/modules/web.immediate.js" ;
import "core-js/modules/web.dom.iterable.js" ;
 Метод usage-global внедряет импорт в полифилы, прикрепленные к глобальной области, но только для неподдерживаемых функций, которые используются в вашем коде. Возможно, вам захочется использовать этот метод, если:
 вам нужно сделать размер кода как можно меньшим и включать только то, что эффективно используется;
 ваш полифилл не поддерживает единую точку входа, но каждую из его функций необходимо загружать отдельно.
 Входной код  Выходной код 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
bar.trimLeft();
arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ;
import "core-js/modules/es.array.unscopables.flat-map.js" ;
import "core-js/modules/es.string.trim-start.js" ;

foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;
 Метод usage-pure внедряет импорт в полифилы для неподдерживаемых функций, которые используются в вашем коде, не прикрепляя полифилы к глобальной области видимости, а импортируя их как обычные функции. Возможно, вам захочется использовать этот метод, если:
 вы являетесь автором библиотеки и не хотите «загрязнять» глобальную область загружаемыми полифилами.
 Входной код  Выходной код 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
_trimLeftInstanceProperty(bar).call(bar);
arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ;
import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ;

_flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ;
_trimLeftInstanceProperty ( bar ) . call ( bar ) ;
arr . includes ( 2 ) ; 
 История и мотивация
 За последние три с половиной года @babel/preset-env продемонстрировал весь свой потенциал в уменьшении размеров пакетов не только за счет отказа от переноса поддерживаемых функций синтаксиса, но и за счет исключения ненужных полифилов core-js .
 На данный момент Babel предоставил три различных способа внедрения полифилов core-js в исходный код:
 Используя параметр useBuiltIns: "entry" @babel/preset-env , можно внедрить самоустанавливающиеся полифилы для каждой функции ECMAScript, которая изначально не поддерживается целевыми браузерами;
 Используя @babel/preset-env useBuiltIns: "usage" , Babel будет внедрять самоустанавливающиеся полифилы только для неподдерживаемых функций ECMAScript, но только в том случае, если они действительно используются во входном исходном коде;
 Используя @babel/plugin-transform-runtime , Babel будет внедрять «чистые» полифилы (которые, в отличие от самоустанавливающихся, не загрязняют глобальную область видимости) для каждой используемой функции ECMAScript, поддерживаемой core-js . Обычно это используется авторами библиотек.
 У нашего старого подхода есть две основные проблемы:
 Невозможно было использовать параметр targets @babel/preset-env с «чистыми» полифилами, поскольку @babel/plugin-transform-runtime — это совершенно отдельный пакет.
 Мы заставляли наших пользователей использовать core-js если они хотели интегрировать Babel. core-js — хороший и всеобъемлющий полифил, но он не соответствует потребностям всех наших пользователей.
 С помощью этих новых пакетов мы предлагаем решение обеих этих проблем, сохраняя при этом полную обратную совместимость.
 Хотите внести свой вклад?
 Посетите наш CONTRIBUTING.md, чтобы начать настройку репозитория.

Конфигурация	Входной код	Выходной код
{ "targets" : { "firefox" : 65 }, "plugins" : [ [ " polyfill-es-shims " , { "method" : " usage-global " }] ] }	Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;	{ console.log("Done!"); });"> import "promise.prototype.finally/auto" ; import "promise.allsettled/auto" ; Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;

Полифилл	Плагин	Методы
`core-js@2`	`babel-plugin-polyfill-corejs2`	`entry-global` , `usage-global` и `usage-pure`
`core-js@3`	`babel-plugin-polyfill-corejs3`	`entry-global` , `usage-global` и `usage-pure`
`es-shims`	`babel-plugin-polyfill-es-shims`	`usage-global` и `usage-pure`
`regenerator-runtime`	`babel-plugin-polyfill-regenerator`	`entry-global` , `usage-global` и `usage-pure`

Входной код	Выходной код
import "core-js" ;	import "core-js/modules/es7.array.flat-map.js" ; import "core-js/modules/es6.array.sort.js" ; import "core-js/modules/es7.promise.finally.js" ; import "core-js/modules/es7.symbol.async-iterator.js" ; import "core-js/modules/es7.string.trim-left.js" ; import "core-js/modules/es7.string.trim-right.js" ; import "core-js/modules/web.timers.js" ; import "core-js/modules/web.immediate.js" ; import "core-js/modules/web.dom.iterable.js" ;

Входной код	Выходной код
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); bar.trimLeft(); arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ; import "core-js/modules/es.array.unscopables.flat-map.js" ; import "core-js/modules/es.string.trim-start.js" ; foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;

Входной код	Выходной код
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); _trimLeftInstanceProperty(bar).call(bar); arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ; import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ; _flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ; _trimLeftInstanceProperty ( bar ) . call ( bar ) ; arr . includes ( 2 ) ;