Come installo la libreria babel-polyfill?

Ho appena iniziato a usare Babel per compilare il mio codice javascript ES6 in ES5. Quando inizio a utilizzare Promises sembra che non funzioni. Il sito web Babel afferma il supporto per le promesse tramite polyfill.

Senza fortuna, ho provato ad aggiungere:

require("babel/polyfill");

o

import * as p from "babel/polyfill";

Con ciò visualizzerò il seguente errore sul bootstrap della mia app:

Impossibile trovare il modulo 'babel / polyfill'

Ho cercato il modulo ma sembra che qui manchi qualcosa di fondamentale. Ho anche provato ad aggiungere il vecchio e buon NPM bluebird ma sembra che non funzioni.

Come usare i polyfill di Babel?

Questo è cambiato un po 'in Babel V6.

Dai documenti:

Il polyfill emulerà un ambiente ES6 completo. Questo polyfill viene caricato automaticamente quando si utilizza il nodo babele.

Installazione:
$ npm install babel-polyfill

Utilizzo in Nodo / Browserify / Webpack:
per includere il polyfill è necessario richiederlo nella parte superiore del punto di ingresso dell'applicazione.
require("babel-polyfill");

Utilizzo nel browser:
disponibile dal dist/polyfill.jsfile in una babel-polyfillversione npm. Questo deve essere incluso prima di tutto il codice Babel compilato. È possibile anteporre al codice compilato o includerlo in un <script>prima.

NOTA: non utilizzare requiretramite browserify ecc., Utilizzare babel-polyfill.

I documenti di Babel descrivono questo in modo abbastanza conciso:

Babel include un polyfill che include un runtime di rigeneratore personalizzato e core.js.

Questo emulerà un ambiente ES6 completo. Questo polyfill viene caricato automaticamente quando si utilizzano babel-node e babel / register.

Assicurati di averlo richiesto nel punto di accesso alla tua applicazione, prima di chiamare qualsiasi altra cosa. Se stai usando uno strumento come il webpack, diventa abbastanza semplice (puoi dire al webpack di includerlo nel bundle).

Se si utilizza uno strumento come gulp-babelo babel-loader, è necessario installare anche il babelpacchetto stesso per utilizzare il polyfill.

Si noti inoltre che per i moduli che influenzano l'ambito globale (polyfill e simili), è possibile utilizzare un'importazione concisa per evitare di avere variabili non utilizzate nel modulo:

import 'babel/polyfill';

Per Babel versione 7, se stai usando @ babel / preset-env, per includere polyfill tutto ciò che devi fare è aggiungere un flag "useBuiltIns" con il valore di "utilizzo" nella configurazione di babel. Non è necessario richiedere o importare polyfill nel punto di ingresso della tua app.

Con questo flag specificato, babel @ 7 ottimizzerà e includerà solo i polyfill di cui hai bisogno.

Per utilizzare questo flag, dopo l'installazione:

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

Aggiungi semplicemente la bandiera:

useBuiltIns: "usage" 

al tuo file di configurazione di babel chiamato "babel.config.js" (anche nuovo per Babel @ 7), nella sezione "@ babel / env":

// file: babel.config.js

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

   return { presets };
};

Riferimento:

• utilizzo # polyfill
• babel-polyfill # utilizzo-in-node-browserify-webpack
• babel-preimpostato-ENV # usebuiltins

Aggiornamento agosto 2019:

Con il rilascio di Babel 7.4.0 (19 marzo 2019) @ babel / polyfill è obsoleto. Invece di installare @ babe / polyfill, installerai core-js:

npm install --save core-js@3

Una nuova voce corejsviene aggiunta a 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 };
};

vedi esempio: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Riferimento:

• 7.4.0 Rilasciato: core-js 3, metodi privati ​​statici e applicazione parziale
• core-js @ 3, babel e uno sguardo al futuro

Se il tuo pacchetto.json è simile al seguente:

  ...
  "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",
  ...

E ricevi il Cannot find module 'babel/polyfill'messaggio di errore, quindi probabilmente devi solo cambiare la tua dichiarazione di importazione DA:

import "babel/polyfill";

PER:

import "babel-polyfill";

E assicurati che venga prima di qualsiasi altra importaffermazione (non necessariamente nel punto di ingresso della tua domanda).

Riferimento: https://babeljs.io/docs/usage/polyfill/

Prima di tutto, l'ovvia risposta che nessuno ha fornito, devi installare Babel nella tua applicazione:

npm install babel --save

(o babel-corese invece lo desideri require('babel-core/polyfill')).

A parte questo, ho un compito grugnito di traspilare il mio es6 e jsx come un passo di costruzione (cioè non voglio usare babel/register, motivo per cui sto cercando di usarebabel/polyfill direttamente in primo luogo), quindi mi piacerebbe porre maggiormente l'accento su questa parte della risposta di @ssube:

Assicurati di averlo richiesto nel punto di accesso alla tua applicazione, prima di chiamare qualsiasi altra cosa

Mi sono imbattuto in qualche strano problema in cui stavo cercando di richiedere babel/polyfillda un file di avvio dell'ambiente condiviso e ho ricevuto l'errore a cui l'utente ha fatto riferimento - Penso che potrebbe aver avuto a che fare con il modo in cui le importazioni di babel richiedono rispetto alle importazioni ma non riesco a riprodurre adesso. Comunque, commoventeimport 'babel/polyfill' come prima riga negli script di avvio sia del mio client che del server ha risolto il problema.

Nota che se invece vuoi usare require('babel/polyfill')mi assicurerei che anche tutte le altre istruzioni del caricatore del modulo siano necessarie e non utilizzino le importazioni - evita di mescolare le due cose. In altre parole, se sono presenti dichiarazioni di importazione nello script di avvio, creare import babel/polyfillla prima riga nello script anziché require('babel/polyfill').

babel-polyfill consente di utilizzare l'intero set di funzionalità ES6 oltre le modifiche alla sintassi. Ciò include funzionalità come nuovi oggetti incorporati come Promises e WeakMap, nonché nuovi metodi statici come Array.from o Object.assign.

Senza babel-polyfill, babel ti consente di utilizzare solo funzioni come le funzioni freccia, destrutturazione, argomenti predefiniti e altre funzionalità specifiche della sintassi introdotte in 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

Come Babel dice nei documenti , per Babel> 7.4.0 il modulo @ babel / polyfill è deprecato , quindi si consiglia di utilizzare direttamente le librerie core-js e rigenerator-runtime che prima erano incluse in @ babel / polyfill.

Quindi questo ha funzionato per me:

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

quindi aggiungi all'inizio del tuo file js iniziale:

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