Запутался в опции useBuiltIns @babel/preset-env (используя Интеграцию по списку браузеров)

Question

Я работаю над веб-проектом, использующим Babel 7 с Webpack 4. Я никогда раньше не использовал Babel и не могу понять некоторые его части. На основании документации, которую я использую @babel/preset-env потому что это кажется рекомендуемым способом (особенно для начинающих). Также с помощью интеграции Browserslist через мой .browserslistrc файл.

Webpack хорошо выполняет компиляцию (babel-loader версия 8.0.2), У меня нет ошибок, но я запутался в этом useBuiltIns: "entry" упомянутый здесь вариант и как polyfill Система работает в Вавилоне.

.babelrc.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

.browserslistrc
Скопировано отсюда (разумно, потому что мой проект использует Bootstrap).

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

Итак, мои вопросы:

1) мне нужно использовать это useBuiltIns: "entry" вариант?

2) Нужно ли устанавливать @babel/polyfill пакет и начать мой vendors.js с require("@babel/polyfill");?

3) Что если я пропущу оба?

Если я сделаю 1 и 2, мой vendors.js растет до 411 KB
Если я пропущу оба, это просто 341 KB
после постройки производства.

я думал @babel/preset-env по умолчанию обрабатывает все переписывает и заполняет import/require нужно на моей стороне...

Спасибо!

-- РЕДАКТИРОВАТЬ --

Команда Бабеля только что обновила документы @babel/polyfill основанный на некоторых проблемах GitHub (включая мою), жалующихся на неясную / вводящую в заблуждение документацию. Теперь очевидно, как его использовать. (... и после этого мой оригинальный вопрос кажется глупым:)

Answer 1

1) Нужно ли использовать эту опцию useBuiltIns: "entry"?

Да, согласно Babel Docs:

"Этот параметр включает новый плагин, который заменяет оператор import" @babel/polyfill "или require (" @babel/polyfill ") индивидуальными требованиями для @babel/polyfill в зависимости от среды" - в основном, включает все необходимые polyfills (когда вы иметь @babel/polyfill устанавливается при необходимости).

2) Нужно ли устанавливать пакет @babel/polyfill и запускать мои vendors.js с помощью require("@babel/polyfill");?

Вам нужно установить @babe/polyfillПо умолчанию это не входит в Babel. Вы должны включить это в свою точку входа или добавить импорт в верхней части своей точки входа.

3) Что если я пропущу оба?

У вас не будет полифилов.

Answer 2

1) Нужно ли мне использовать эту опцию useBuiltIns: "entry"?

Да, если вы хотите включить полифилы на основе вашей целевой среды.

TL;DR

В основном есть 3 варианта useBuiltIns:

"запись": при использовании этой опции,@babel/preset-env заменяет прямой импорт core-js для импорта только определенных модулей, необходимых для целевой среды.

Это означает, что вам нужно добавить

import "core-js/stable";
import "regenerator-runtime/runtime";

к вашей точке входа, и эти строки будут заменены только необходимыми полифилами. При нацеливании на хром 72 он будет преобразован@babel/preset-env к

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";

---

"Использование": в этом случае полифиллы будут добавляться автоматически, если использование какой-либо функции не поддерживается в целевой среде. Так:

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

в таких браузерах, как ie11 будет заменен на

import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

В случае, если целевой браузер - последняя версия Chrome, никакие преобразования не применяются.

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

---

false: это значение по умолчанию, когда полифиллы не добавляются автоматически.

---

2) Нужно ли мне установить пакет @babel/polyfill и запустить мой vendors.js с помощью require("@babel/polyfill");?

Да для среды до babel v7.4 а также core-js v3.

TL;DR

Нет. Начиная с babel v7.4 а также core-js v3 (который используется для полифиллинга под капотом) @babel/preset-env добавит полифиллы только тогда, когда узнает, какие из них требуются, и в рекомендуемом порядке.

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

Таким образом, использование useBuiltIns с вариантами, отличными от false, должно решить проблему.

Не забудьте добавить core-js как зависимость от вашего проекта и установите его версию в @babel/preset-env под corejs свойство.

---

3) Что, если я пропущу оба?

Как уже ответил @PlayMa256, полифиллов не будет.

---

Более подробную и полную информацию можно найти на core-js страница создателя

Также не стесняйтесь играть с песочницей Babel