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

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

0 голосов
/ 03 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 08 июня 2019

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

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

2) Нужно ли устанавливать пакет @ babel / polyfill и запускать мои vendors.js с помощью require ("@Бабель / 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 sandbox

0 голосов
/ 03 октября 2018

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

Да, в соответствии с документами babel:

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

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

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

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

У вас не будетpolyfills.

...