it-swarm.com.ru

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

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

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

require("babel/polyfill");

или же

import * as p from "babel/polyfill";

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

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

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

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

130
Shlomi Sasson

Это немного изменилось в 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.

65
vdclouis

Babel docs описывает это довольно кратко:

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

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

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

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

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

import 'babel/polyfill';
48
ssube

Если ваш 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/

19
l3x

Для 7-й версии Babel, если вы используете @ 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 };
};

Ссылка:

9
apollo

Прежде всего, очевидный ответ, который никто не дал, вам нужно установить 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').

9
ChetPrickles

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-7c8de164e42

8
zloctb