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

Я щойно почав використовувати Babel для компіляції свого коду JavaScript ES6 в ES5. Коли я починаю використовувати Обіцянки, то здається, що це не працює. Веб-сайт Babel заявляє про підтримку обіцянок через поліфіли.

Не пощастивши, я спробував додати:

require("babel/polyfill");

або

import * as p from "babel/polyfill";

З цим я отримаю таку помилку під час завантаження програми:

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

Я шукав модуль, але, здається, тут я пропускаю якусь фундаментальну річ. Я також спробував додати старий і хороший синій птах NPM, але, схоже, це не працює.

Як користуватися поліфілами від Babel?

Це трохи змінилося в babel v6.

З документів:

Поліфол буде імітувати повне середовище ES6. Ця поліфазова заповнення автоматично завантажується при використанні бабеля-вузла.

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

Використання в Node / Browserify / Webpack:
Щоб включити полі-заповнення, вам потрібно його в верхній частині точки входу до вашої програми.
require("babel-polyfill");

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

ПРИМІТКА. Не робіть requireце за допомогою перегляду веб-адрес тощо babel-polyfill.

Документи Вавилона описують це досить стисло:

Babel включає поліфіл, який включає в себе користувальницьку програму регенерації та core.js.

Це імітуватиме повне середовище ES6. Ця поліфазова заповнення автоматично завантажується при використанні babel-вузла та babel / register.

Переконайтеся, що вам потрібно це в точці входу до вашої заявки, перш ніж щось інше буде викликано. Якщо ви використовуєте такий інструмент, як webpack, це стає досить простим (ви можете сказати webpack включити його в комплект).

Якщо ви використовуєте такий інструмент, як, gulp-babelабо babel-loaderвам потрібно також встановити сам babelпакет, щоб використовувати полі-заливку.

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

import 'babel/polyfill';

Для Babel версії 7, якщо ви використовуєте @ babel / preset-env, для включення polyfill все, що вам потрібно зробити, це додати прапор 'useBuiltIns' зі значенням 'використання' у вашій конфігурації 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
• babel-polyfill # use-in-node-browserify-webpack
• babel-preset-env # 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, babel і погляд у майбутнє

Якщо ваш 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'повідомлення про помилку, то вам, ймовірно, просто потрібно змінити заяву про імпорт З:

import "babel/polyfill";

ДО:

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від якогось файлу запуску спільного середовища, і я отримав помилку, на яку посилається користувач - я думаю, що це могло мати щось спільне з тим, як наказовий замовлення імпортує проти потрібного, але я не можу відтворити зараз. У будь-якому разі, переміщення 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 та regenerator-runtime бібліотеки які раніше були включені в @ babel / polyfill.

Отже, це працювало для мене:

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

потім додайте до самого верху початкового файлу js:

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