Как установить библиотеку babel-polyfill?

Я только начал использовать Babel для компиляции своего кода JavaScript ES6 в ES5. Когда я начинаю использовать Promises, похоже, он не работает. Сайт Babel заявляет о поддержке обещаний через полифиллы.

Без всякой удачи я попытался добавить:

require("babel/polyfill");

или

import * as p from "babel/polyfill";

При этом я получаю следующую ошибку при загрузке моего приложения:

Не удается найти модуль 'babel / polyfill'

Я искал модуль, но, похоже, мне здесь не хватает какой-то фундаментальной вещи. Я также попытался добавить старый и хороший NPM для Bluebird, но похоже, что он не работает.

Как использовать полифилы от Babel?

Это немного изменилось в Babel v6.

Из документов:

Polyfill будет эмулировать полную среду ES6. Этот полифилл автоматически загружается при использовании babel-node.

Монтаж:
$ npm install babel-polyfill

Использование в Node / Browserify / Webpack:
чтобы включить полифил, вам нужно указать его в верхней части точки входа в ваше приложение.
require("babel-polyfill");

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

ПРИМЕЧАНИЕ: не делайте requireэтого через browserify и т. Д., Используйте babel-polyfill.

В документах Бабеля описывают это довольно лаконично:

Babel включает в себя polyfill, который включает пользовательскую среду выполнения регенератора и core.js.

Это будет эмулировать полную среду ES6. Этот polyfill автоматически загружается при использовании babel-node и babel / register.

Убедитесь, что вы требуете его в точке входа в ваше приложение, прежде чем что-либо еще вызывается. Если вы используете такой инструмент, как веб-пакет, это становится довольно простым (вы можете указать веб-пакету включить его в пакет).

Если вы используете такой инструмент, как gulp-babelили babel-loader, вам также нужно установить сам babelпакет, чтобы использовать полифилл.

Также обратите внимание, что для модулей, которые влияют на глобальную область действия (полифилы и тому подобное), вы можете использовать краткий импорт, чтобы избежать использования неиспользуемых переменных в вашем модуле:

import 'babel/polyfill';

Для Babel версии 7, если вы используете @ babel / preset-env, для включения polyfill все, что вам нужно сделать, это добавить флаг «useBuiltIns» со значением «using» в вашей конфигурации babel. Нет необходимости запрашивать или импортировать полизаполнение в точке входа вашего приложения.

Если указан этот флаг, babel @ 7 будет оптимизировать и включать только те необходимые вам заполнения.

Чтобы использовать этот флаг, после установки:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

Просто добавьте флаг:

useBuiltIns: "usage" 

в ваш конфигурационный файл babel с именем "babel.config.js" (также новый для Babel @ 7) в разделе "@ babel / env":

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

Ссылка:

• использование # polyfill
• Бабель-polyfill # использование-в-узле-browserify-WebPack
• столпотворение-предустановленным окр # usebuiltins

Обновление Авг 2019:

С выпуском Babel 7.4.0 (19 марта 2019 г.) @ babel / polyfill устарела. Вместо установки @ babe / polyfill вы установите core-js:

npm install --save core-js@3

Новая запись corejsдобавлена ​​в ваш babel.config.js

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

см. пример: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Ссылка:

• 7.4.0 Выпущено: core-js 3, статические приватные методы и частичное применение
• core-js @ 3, Вавилон и взгляд в будущее

Если ваш package.json выглядит примерно так:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

И вы получите Cannot find module 'babel/polyfill'сообщение об ошибке, тогда вам, вероятно, просто нужно изменить оператор импорта FROM:

import "babel/polyfill";

TO:

import "babel-polyfill";

И убедитесь, что он предшествует любому другому importутверждению (не обязательно в точке входа вашего приложения).

Ссылка: https://babeljs.io/docs/usage/polyfill/

Во-первых, очевидный ответ, который никто не дал, вам нужно установить Babel в ваше приложение:

npm install babel --save

(или babel-coreесли вы хотите вместо этого require('babel-core/polyfill')).

Помимо этого, у меня есть грандиозная задача по переносу моих es6 и jsx в качестве шага сборки (то есть я не хочу использовать babel/register, именно поэтому я пытаюсь использовать babel/polyfillнепосредственно с самого начала), поэтому я бы хотел уделите больше внимания этой части ответа @ ssube:

Убедитесь, что вы требуете его в точке входа в ваше приложение, прежде чем что-либо еще называется

Я столкнулся с какой-то странной проблемой, из-за которой я пытался запросить babel/polyfillкакой-то файл запуска общей среды, и я получил ошибку, на которую ссылался пользователь. Я думаю, что это может быть связано с тем, как импорт заказов Babel по сравнению с требованиями требует, но я не могу воспроизвести сейчас. В любом случае, перемещение import 'babel/polyfill'в качестве первой строки в моих клиентских и серверных сценариях запуска решило проблему.

Обратите внимание, что если вы вместо этого хотите использовать, require('babel/polyfill')я бы удостоверился, что все ваши другие операторы загрузчика модулей также требуются, а не используйте импорт - избегайте их смешивания. Другими словами, если у вас есть какие-либо операторы импорта в вашем скрипте запуска, сделайте import babel/polyfillпервую строку в вашем скрипте, а не require('babel/polyfill').

babel-polyfill позволяет вам использовать полный набор функций ES6 за пределами синтаксических изменений. Это включает в себя такие функции, как новые встроенные объекты, такие как Promises и WeakMap, а также новые статические методы, такие как Array.from или Object.assign.

Без babel-polyfill babel позволяет использовать только такие функции, как функции стрелок, деструктурирование, аргументы по умолчанию и другие специфичные для синтаксиса функции, представленные в ES6.

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Как говорит Бабель в документации , для Babel> 7.4.0 модуль @ babel / polyfill устарел , поэтому рекомендуется использовать напрямую библиотеки core-js и регенератор-время выполнения, которые ранее были включены в @ babel / polyfill.

Так что это сработало для меня:

npm install --save core-js@3.6.5
npm install regenerator-runtime

затем добавьте в самый верх вашего исходного js-файла:

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