Babel polyfill? Cos'è quello?

Question

Ho appena iniziato a utilizzare 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 alcuna fortuna, ho provato ad aggiungere:

require("babel/polyfill"); 

o

import * as p from "babel/polyfill"; 

Con questo io ottenere il seguente errore sul mio app bootstrapping:

non riesce a trovare modulo 'babel/polyfill'

Ho cercato il modulo ma sembra che mi manchi una cosa fondamentale qui. Ho anche provato ad aggiungere il vecchio e buono bluebird NPM ma sembra che non funzioni.

Come utilizzare i polyfill di Babel?

Answer 1

Il Babel docs descrivere questo abbastanza conciso:

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

Questo emula un ambiente ES6 completo. Questo polyfill è caricato automaticamente quando si usano babel-node e babel/register.

Assicurarsi di averlo richiesto al punto di accesso all'applicazione, prima di ogni altra chiamata. Se stai usando uno strumento come il webpack, diventa piuttosto semplice (puoi dire al webpack di includerlo nel pacchetto).

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

Si noti inoltre che per i moduli che interessano l'ambito globale (polyfills e simili), è possibile utilizzare un import laconico per evitare di avere le variabili non utilizzati nel vostro modulo:

import 'babel/polyfill'; 

Answer 2

Prima di tutto, la risposta ovvia che nessuno ha fornito, è necessario installare Babel nella vostra applicazione:

npm install babel --save 

(o babel-core se si desidera invece require('babel-core/polyfill')).

A parte questo, ho un compito da eseguire per traspolare il mio es6 e jsx come passo di costruzione (ad es.Non voglio usare babel/register, motivo per cui sto cercando di utilizzare babel/polyfill direttamente in primo luogo), quindi mi piacerebbe porre maggiormente l'accento su questa parte della risposta di @ ssube:

Assicurarsi lo richiedono al punto di ingresso per la vostra applicazione, prima di ogni altra cosa è chiamato

mi sono imbattuto in qualche problema strano in cui stavo cercando di richiedere babel/polyfill da alcune file di avvio ambiente condiviso e ho ottenuto l'errore l'utente referenziato - Penso che potrebbe aver avuto qualcosa a che fare con il modo in cui Babel ordina le importazioni rispetto a quanto richiesto ma non riesco a riprodurlo ora. In ogni caso, lo spostamento di import 'babel/polyfill' come prima riga in entrambi gli script di avvio del client e del server ha risolto il problema.

Si noti che se si desidera invece utilizzare require('babel/polyfill'), mi piacerebbe che anche tutte le altre istruzioni del caricatore del modulo richiedessero e non utilizzassero importazioni, evitando di mescolare le due. In altre parole, se nel tuo script di avvio sono presenti istruzioni di importazione, imposta import babel/polyfill la prima riga del tuo script anziché require('babel/polyfill').

Answer 3

Questo è cambiato un po 'in babel v6.

Dalla documentazione:

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

Installazione:
$ npm install babel-polyfill

Utilizzo in Nodo/Browserify/Webpack:
Per includere il polyfill è necessario richiedere ai vertici del punto di ingresso per l'applicazione.
require("babel-polyfill");

uso nel browser:
Disponibile dal file dist/polyfill.js all'interno di un rilascio babel-polyfill NPM. Questo deve essere incluso prima di tutto il codice Babel compilato. Puoi anteporre il codice al tuo codice compilato o includerlo in un <script> prima di esso.

NOTA: non utilizzare require tramite browser, ecc., Utilizzare babel-polyfill.

Answer 4

Se il package.json simile a quanto segue:

... 
    "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 si ottiene il messaggio di Cannot find module 'babel/polyfill' errore, allora probabilmente solo bisogno di cambiare la vostra istruzione import DA:

import "babel/polyfill"; 

TO :

import "babel-polyfill"; 

E assicurarsi che venga prima di qualsiasi altroIstruzione(non necessariamente nel punto di ingresso dell'applicazione).

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

Answer 5

babel-polyfill consente di utilizzare la serie completa di funzioni di là ES6 cambiamenti di sintassi. Ciò include funzionalità come i nuovi oggetti incorporati come Promises e WeakMap, nonché nuovi metodi statici come Array.from o Object.assign.

Senza babel-polyfill, Babel consente solo l'utilizzo di funzioni come le funzioni freccia , la destrutturazione, gli argomenti predefiniti e altre funzioni 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