Можно использовать @babel/preset-env
с удобной опцией "useBuiltIns": "usage"
и не париться на счет полифилов, babel все сделает за Вас.
С этой опцией babel добавляет импорт полифилов на основе использования в преобразованном коде. Например, если вы используете Object.assign
в своем коде, соответствующий polyfill будет автоматически импортирован если ваша целевая среда не поддерживает его.
Если вы создаете библиотеку или веб-компонент вместо приложения, Вы, вероятно, захотите установить значение useBuiltIns
как false
и позволить потребительскому приложению отвечать за полифилы.
Обратите внимание, что обнаружение использования не применяется к вашим зависимостям (которые по умолчанию исключены cli-plugin-babel
). Если для одной из ваших зависимостей нужны полисы, у вас есть несколько вариантов:
- Если зависимость отправляет код ES5 и явно перечисляет требуемые полифилы: вы можете предварительно включить необходимые полисы, используя опцию polyfills для этой предварительной настройки.
- Если зависимость отправляет код ES5, но использует функции ES6 + без явного указания какие полифилы нужны: используйте
"useBuiltIns": "entry"
, а затем добавьте import '@babel/polyfill'
в ваш входной файл (главный). Это будет импортировать ВСЕ полифилы на основе ваших целевых показателей какие браузеры поддерживать, так что вам больше не нужно будет беспокоиться о полисах с зависимостями, но, скорее всего, увеличит ваш окончательный размер пакета с помощью некоторых неиспользуемых полифилов.
Вот таким будет конфиг:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
Подробнее тут.
Также для Babel 7.x желательно использовать файл конфига babel.config.js
вместо .babelrc
: https://babeljs.io/docs/en/config-files