@babel/polyfill

🚨 По состоянию на Babel 7.4.0, этот пакет устарел в пользу прямого включения core-js/stable (для полифиллирования функций ECMAScript):

import "core-js/stable";

Если вы компилируете генераторы или асинхронные функции в ES5, и используете версию @babel/core или @babel/plugin-transform-regenerator старше 7.18.0, вам необходимо также загрузить пакет regenerator runtime. Он автоматически загружается при использовании опции @babel/preset-env's useBuiltIns: "usage" или @babel/plugin-transform-runtime.

Babel включает полифилл, который включает пользовательский regenerator runtime и core-js.

Это позволит эмулировать полную среду ES2015+ (без предложений < Stage 4) и предназначено для использования в приложении, а не в библиотеке/инструменте. (Этот полифилл автоматически загружается при использовании babel-node).

Это означает, что вы можете использовать новые встроенные функции, такие как Promise или WeakMap, статические методы, такие как Array.from или Object.assign, методы экземпляров, такие как Array.prototype.includes, и функции генераторов (при условии использования плагина regenerator).

Установка​

npm install --save @babel/polyfill

yarn add @babel/polyfill

pnpm add @babel/polyfill

Поскольку это полифилл (который выполняется перед вашим исходным кодом), нам нужно, чтобы он был dependency, а не devDependency

Размер​

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

Предложения TC39​

Если вам нужно использовать предложение, которое не является Stage 4, @babel/polyfill не будет автоматически импортировать их для вас. Вам нужно будет импортировать их из другого полифилла, например core-js, по отдельности. Мы можем стремиться включить это в виде отдельных файлов в @babel/polyfill в скором времени.

Использование в Node/Browserify/Webpack​

Чтобы включить полифилл, необходимо потребовать его в начале точечки входа вашего приложения.

Убедитесь, что он вызывается перед всеми другими операторами кода/require!

require("@babel/polyfill");

Если вы используете синтаксис ES6's import в точечке входа вашего приложения, вы должны вместо этого импортировать полифилл в начале точечки входа, чтобы гарантировать загрузку полифиллов в первую очередь:

import "@babel/polyfill";

В webpack есть несколько способов включить полифиллы:

• При использовании вместе с @babel/preset-env,

  • Если useBuiltIns: 'usage' указано в .babelrc, не включайте @babel/polyfill ни в массив webpack.config.js entry, ни в source. Обратите внимание, что @babel/polyfill всё ещё нужно установить.

  • Если useBuiltIns: 'entry' указано в .babelrc, включите @babel/polyfill в начало точечки входа вашего приложения с помощью require или import, как описано выше.

  • Если ключ useBuiltIns не указан или он явно задан как useBuiltIns: false в вашем .babelrc, добавьте @babel/polyfill непосредственно в массив entry в вашем webpack.config.js.

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

• Если @babel/preset-env не используется, добавьте @babel/polyfill в массив webpack entry, как описано выше. Его можно добавить в начало точечки входа приложения с помощью import или require, но это не рекомендуется.

Мы не рекомендуем импортировать весь полифилл напрямую: попробуйте использовать опции useBuiltIns или импортируйте только необходимые полифиллы вручную (из этого пакета или из другого источника).

Использование в браузере​

Доступно из файла dist/polyfill.js в рамках выпуска @babel/polyfill npm. Это необходимо включить перед всем вашим скомпилированным кодом Babel. Вы можете либо добавить его перед своим скомпилированным кодом, либо включить его в <script> перед ним.

ПРИМЕЧАНИЕ: Не require это с помощью browserify и т.д., используйте @babel/polyfill.

Подробности​

Если вам нужно что-то, что не будет изменять глобальные переменные для использования в инструменте/библиотеке, ознакомьтесь с плагином transform-runtime. Это означает, что вы не сможете использовать методы экземпляров, упомянутые выше, такие как Array.prototype.includes.​

Обратите внимание: в зависимости от того, какие методы ES2015 вы фактически используете, вам может не потребоваться использовать @babel/polyfill или плагин runtime. Вы можете загрузить только необходимые полифиллы (например, Object.assign) или просто задокументировать, что среда, в которой загружается библиотека, должна включать определенные полифиллы.