Вавилон polyfill? Что это?

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

Без везения я попытался добавить:

require("babel/polyfill");

или

import * as p from "babel/polyfill";

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

Невозможно найти модуль 'babel/ polyfill'

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

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

Ответ 1

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

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

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

Установка:
$ npm install babel-polyfill

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

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

ПРИМЕЧАНИЕ. Не выполняйте require через браузер и т.д., используйте babel-polyfill.

Ответ 2

Вавилонские документы описывают это довольно кратко:

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

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

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

Если вы используете инструмент типа gulp-babel или babel-loader, вам также нужно установить пакет babel для использования polyfill.

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

import 'babel/polyfill';

Ответ 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/

Ответ 4

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

npm install babel --save

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

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

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

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

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

Ответ 5

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