Wie installiere ich die babel-polyfill-Bibliothek?

Ich habe gerade angefangen, Babel zu verwenden, um meinen ES6-Javascript-Code in ES5 zu kompilieren. Wenn ich Promises benutze, sieht es so aus, als würde es nicht funktionieren. Auf der Babel-Website wird die Unterstützung von Versprechungen über Polyfills angegeben.

Ohne Glück versuchte ich hinzuzufügen:

require("babel/polyfill");

oder

import * as p from "babel/polyfill";

Damit erhalte ich beim Bootstrapping meiner App den folgenden Fehler:

Modul 'babel / polyfill' kann nicht gefunden werden

Ich habe nach dem Modul gesucht, aber es scheint, dass mir hier etwas Grundlegendes fehlt. Ich habe auch versucht, das alte und gute Bluebird NPM hinzuzufügen, aber es sieht so aus, als würde es nicht funktionieren.

Wie verwende ich die Polyfills von Babel?

Dies hat sich in babel v6 etwas geändert.

Aus den Dokumenten:

Die Polyfüllung emuliert eine vollständige ES6-Umgebung. Diese Polyfüllung wird bei Verwendung von babel-node automatisch geladen.

Installation:
$ npm install babel-polyfill

Verwendung in Node / Browserify / Webpack:
Um die Polyfüllung einzuschließen , müssen Sie sie oben am Einstiegspunkt Ihrer Anwendung benötigen.
require("babel-polyfill");

Verwendung im Browser:
Verfügbar aus der dist/polyfill.jsDatei innerhalb einer babel-polyfillnpm-Version. Dies muss vor dem gesamten kompilierten Babel-Code enthalten sein. Sie können es entweder Ihrem kompilierten Code voranstellen oder in a einfügen<script> davor stehenden .

HINWEIS: requireVerwenden Sie dies nicht über browserify usw., verwenden Sie babel-polyfill.

Die Babel-Dokumente beschreiben dies ziemlich kurz:

Babel enthält eine Polyfüllung, die eine benutzerdefinierte Regenerator-Laufzeit und core.js enthält.

Dadurch wird eine vollständige ES6-Umgebung emuliert. Diese Polyfüllung wird bei Verwendung von babel-node und babel / register automatisch geladen.

Stellen Sie sicher, dass Sie es am Einstiegspunkt Ihrer Anwendung benötigen, bevor etwas anderes aufgerufen wird. Wenn Sie ein Tool wie Webpack verwenden, wird dies ziemlich einfach (Sie können Webpack anweisen, es in das Bundle aufzunehmen).

Wenn Sie ein Tool wie gulp-babeloder verwenden babel-loader, müssen Sie auch das babelPaket selbst installieren , um die Polyfüllung zu verwenden.

Beachten Sie auch, dass Sie für Module, die sich auf den globalen Bereich auswirken (Polyfills und dergleichen), einen knappen Import verwenden können, um zu vermeiden, dass nicht verwendete Variablen in Ihrem Modul enthalten sind:

import 'babel/polyfill';

Wenn Sie in Babel Version 7 @ babel / preset-env verwenden, müssen Sie zum Einschließen von Polyfill lediglich ein Flag 'useBuiltIns' mit dem Wert 'usage' in Ihre Babel-Konfiguration einfügen. Es ist nicht erforderlich, Polyfill am Einstiegspunkt Ihrer App zu benötigen oder zu importieren.

Mit diesem Flag wird babel @ 7 optimiert und enthält nur die Polyfills, die Sie benötigen.

So verwenden Sie dieses Flag nach der Installation:

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

Fügen Sie einfach die Flagge hinzu:

useBuiltIns: "usage" 

in Ihre Babel-Konfigurationsdatei mit dem Namen "babel.config.js" (ebenfalls neu in Babel @ 7) im Abschnitt "@ babel / env":

// file: babel.config.js

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

   return { presets };
};

Referenz:

• Verwendung # Polyfill
• babel-polyfill # usage-in-node-browserify-webpack
• babel-preset-env # usebuiltins

Update August 2019:

Mit der Veröffentlichung von Babel 7.4.0 (19. März 2019) ist @ babel / polyfill veraltet. Anstatt @ babe / polyfill zu installieren, installieren Sie core-js:

npm install --save core-js@3

Ein neuer Eintrag corejswird zu Ihrer babel.config.js hinzugefügt

// 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 };
};

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

Referenz:

• 7.4.0 Freigegeben: Core-JS 3, statische private Methoden und teilweise Anwendung
• core-js @ 3, babel und ein blick in die zukunft

Wenn Ihre package.json ungefähr so ​​aussieht:

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

Und Sie erhalten die Cannot find module 'babel/polyfill'Fehlermeldung, dann müssen Sie wahrscheinlich nur Ihre Importanweisung ändern FROM:

import "babel/polyfill";

ZU:

import "babel-polyfill";

Und stellen Sie sicher, dass es vor jeder anderen importAussage steht (nicht unbedingt am Einstiegspunkt Ihrer Bewerbung).

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

Zunächst einmal, die offensichtliche Antwort, die niemand gegeben hat, müssen Sie Babel in Ihre Anwendung installieren:

npm install babel --save

(oder babel-corewenn Sie stattdessen möchten require('babel-core/polyfill')).

Abgesehen davon habe ich eine grunzende Aufgabe, meine es6 und jsx als Build-Schritt zu transpilieren (dh ich möchte sie nicht verwenden babel/register, weshalb ich versuche, sie babel/polyfilldirekt zu verwenden ), also würde ich es gerne tun Legen Sie mehr Wert auf diesen Teil der Antwort von @ ssube:

Stellen Sie sicher, dass Sie es am Einstiegspunkt Ihrer Anwendung benötigen, bevor etwas anderes aufgerufen wird

Ich bin auf ein seltsames Problem gestoßen, bei dem ich versucht habe, eine babel/polyfillStartdatei für eine gemeinsam genutzte Umgebung zu benötigen, und ich habe den Fehler erhalten, auf den der Benutzer verwiesen hat. Ich denke, es hat möglicherweise etwas damit zu tun, wie Babel Importe im Vergleich zu Anforderungen bestellt, aber ich kann sie nicht reproduzieren jetzt. Das Verschieben import 'babel/polyfill'als erste Zeile in meinen Client- und Server-Startskripten hat das Problem behoben.

Beachten Sie, dass require('babel/polyfill')ich , wenn Sie stattdessen verwenden möchten, sicherstellen würde, dass alle Ihre anderen Modulladeranweisungen ebenfalls erforderlich sind, und keine Importe verwenden - vermeiden Sie das Mischen der beiden. Mit anderen Worten, wenn Sie Importanweisungen in Ihrem Startskript haben, machen Sie import babel/polyfilldie erste Zeile in Ihrem Skript anstatt require('babel/polyfill').

Mit babel-polyfill können Sie alle ES6-Funktionen über Syntaxänderungen hinaus nutzen. Dies umfasst Funktionen wie neue integrierte Objekte wie Promises und WeakMap sowie neue statische Methoden wie Array.from oder Object.assign.

Ohne babel-polyfill können Sie mit babel nur Funktionen wie Pfeilfunktionen, Destrukturierung, Standardargumente und andere in ES6 eingeführte syntaxspezifische Funktionen verwenden.

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

Wie Babel in den Dokumenten sagt , ist für Babel> 7.4.0 das Modul @ babel / polyfill veraltet , daher wird empfohlen, direkt core-js und regenerator-runtime zu verwenden , die zuvor in @ babel / polyfill enthalten waren.

Das hat also bei mir funktioniert:

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

Fügen Sie dann ganz oben in Ihrer anfänglichen js-Datei Folgendes hinzu:

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