Vai al contenuto principale

@babel/polyfill

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

pericolo

🚨 A partire da Babel 7.4.0, questo pacchetto è deprecato. Si raccomanda di includere direttamente core-js/stable (per il polyfill delle funzionalità ECMAScript):

JavaScript
import "core-js/stable";

Se stai compilando generatori o funzioni asincrone in ES5 e utilizzi una versione di @babel/core o @babel/plugin-transform-regenerator precedente alla 7.18.0, devi anche caricare il pacchetto regenerator runtime. Viene caricato automaticamente quando si utilizza l'opzione useBuiltIns: "usage" di @babel/preset-env o @babel/plugin-transform-runtime.

Babel include un polyfill che contiene un regenerator runtime personalizzato e core-js.

Questo emula un ambiente ES2015+ completo (senza proposte < Stage 4) ed è progettato per essere utilizzato in applicazioni piuttosto che in librerie/strumenti. (questo polyfill viene caricato automaticamente quando si usa babel-node).

Ciò significa che puoi utilizzare nuovi built-in come Promise o WeakMap, metodi statici come Array.from o Object.assign, metodi d'istanza come Array.prototype.includes e funzioni generatrici (a condizione di usare il plugin regenerator). Il polyfill modifica l'ambito globale e i prototipi nativi come String per ottenere questo risultato.

Installazione​

npm install --save @babel/polyfill
informazioni

Poiché si tratta di un polyfill (che viene eseguito prima del codice sorgente), deve essere una dependency, non una devDependency.

Dimensioni​

Il polyfill è fornito per comodità, ma dovresti usarlo con @babel/preset-env e l'opzione useBuiltIns per evitare di includere l'intero polyfill quando non necessario. In alternativa, consigliamo di importare manualmente i singoli polyfill.

Proposte TC39​

Se devi utilizzare una proposta non ancora allo Stage 4, @babel/polyfill non la importerà automaticamente. Dovrai importarla singolarmente da un altro polyfill come core-js. Potremmo lavorare per includerla come file separato in @babel/polyfill a breve.

Utilizzo in Node / Browserify / Webpack​

Per includere il polyfill, devi richiederlo all'inizio del punto d'ingresso della tua applicazione.

Assicurati che venga chiamato prima di qualsiasi altro codice o istruzione require!

JavaScript
require("@babel/polyfill");

Se utilizzi la sintassi import di ES6 nel punto d'ingresso della tua applicazione, dovresti invece importare il polyfill all'inizio del punto d'ingresso per garantire che i polyfill vengano caricati per primi:

JavaScript
import "@babel/polyfill";

Con webpack, esistono diversi modi per includere i polyfill:

  • Quando utilizzato insieme a @babel/preset-env:

    • Se .babelrc specifica useBuiltIns: 'usage', non includere @babel/polyfill né nell'array di entry di webpack.config.js né nel sorgente. Nota: @babel/polyfill deve comunque essere installato.

    • Se .babelrc specifica useBuiltIns: 'entry', includi @babel/polyfill all'inizio del punto d'ingresso della tua applicazione tramite require o import come descritto sopra.

    • Se la chiave useBuiltIns non è specificata o è impostata esplicitamente su useBuiltIns: false nel tuo .babelrc, aggiungi @babel/polyfill direttamente all'array di entry nel tuo webpack.config.js.

webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • Se non si utilizza @babel/preset-env, aggiungere @babel/polyfill all'array di entry di webpack come discusso sopra. Può comunque essere aggiunto in cima al punto di ingresso dell'applicazione tramite import o require, ma non è consigliato.
attenzione

Non consigliamo di importare l'intero polyfill direttamente: provate le opzioni useBuiltIns o importate manualmente solo i polyfill necessari (da questo pacchetto o altrove).

Utilizzo nel browser​

Disponibile nel file dist/polyfill.js all'interno di una release npm di @babel/polyfill. Deve essere incluso prima di tutto il codice Babel compilato. Potete premetterlo al codice compilato o includerlo in un tag <script> prima di esso.

NOTA: Non effettuare il require tramite browserify ecc., usa @babel/polyfill.

Dettagli​

consiglio

Se state cercando qualcosa che non modifichi le variabili globali da utilizzare in uno strumento/libreria, consultate il plugin transform-runtime. Ciò significa che non potrete utilizzare i metodi delle istanze menzionati sopra come Array.prototype.includes.

Nota: A seconda di quali metodi ES2015 utilizzate effettivamente, potreste non aver bisogno di usare @babel/polyfill o il plugin runtime. Potreste voler caricare solo i polyfill specifici che state utilizzando (come Object.assign) oppure documentare semplicemente che l'ambiente in cui viene caricata la libreria dovrebbe includere determinati polyfill.