Вавилон 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