Confused about useBuiltIns опция @babel/preset-env (с использованием интеграции с браузерами)

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

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

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

Ответы

Ответ 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"); ?

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

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

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

Ответ 2

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

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

TL; DR

Есть в основном 3 варианта для использования useBuiltIns:

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

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

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

к вашей точке входа, и эти строки будут заменены только необходимыми полифилами. При таргетинге на chrome 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 или регенератор) в исходный код, так как только требуемые полифилы будут добавляться автоматически в зависимости от целевой среды, установленной в browserlist.

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