Jak zainstalować bibliotekę babel-polyfill?

Właśnie zacząłem używać Babel do kompilowania kodu javascript z ES6 do ES5. Kiedy zaczynam używać Promises, wygląda na to, że nie działa. Witryna Babel zapewnia wsparcie dla obietnic za pośrednictwem polyfills.

Bez szczęścia postarałem się dodać:

require("babel/polyfill");

lub

import * as p from "babel/polyfill";

Dzięki temu otrzymam następujący błąd podczas ładowania mojej aplikacji:

Nie można znaleźć modułu „babel / polyfill”

Szukałem modułu, ale wydaje mi się, że brakuje mi tutaj jakiejś podstawowej rzeczy. Próbowałem też dodać stary i dobry NPM bluebird, ale wygląda na to, że nie działa.

Jak używać polyfills firmy Babel?

Zmieniło się to nieco w babel v6.

Z dokumentów:

Wypełnienie będzie emulowało pełne środowisko ES6. To wypełnienie jest automatycznie wczytywane podczas korzystania z węzła babel.

Instalacja:
$ npm install babel-polyfill

Użycie w Node / Browserify / Webpack:
Aby dołączyć polyfill, musisz go umieścić na górze punktu wejścia do aplikacji.
require("babel-polyfill");

Użycie w przeglądarce:
dostępne z dist/polyfill.jspliku w babel-polyfillwydaniu npm. Należy to uwzględnić przed całym skompilowanym kodem Babel. Możesz dołączyć go do skompilowanego kodu lub dołączyć go <script>przed nim.

UWAGA: Nie rób requiretego przez browserify itp., Użyj babel-polyfill.

Dokumentacja Babel opisuje to dość zwięźle:

Babel zawiera polyfill, który zawiera niestandardowe środowisko wykonawcze regeneratora i core.js.

Spowoduje to emulację pełnego środowiska ES6. Ten polyfill jest ładowany automatycznie, gdy używasz babel-node i babel / register.

Upewnij się, że potrzebujesz go w punkcie wejścia do aplikacji, zanim cokolwiek innego zostanie wywołane. Jeśli używasz narzędzia takiego jak webpack, staje się to całkiem proste (możesz powiedzieć webpakowi, aby dołączył go do pakietu).

Jeśli używasz narzędzia takiego jak gulp-babellub babel-loader, musisz również zainstalować babelsam pakiet, aby użyć wypełnienia.

Pamiętaj również, że w przypadku modułów, które mają wpływ na zasięg globalny (polyfills i tym podobne), możesz użyć krótkiego importu, aby uniknąć nieużywanych zmiennych w module:

import 'babel/polyfill';

W przypadku Babel w wersji 7, jeśli używasz @ babel / preset-env, aby uwzględnić polyfill, wystarczy dodać flagę „useBuiltIns” z wartością „usage” w konfiguracji babel. Nie ma potrzeby, aby wymagać ani importować polyfillu w punkcie wejścia aplikacji.

Po określeniu tej flagi babel @ 7 zoptymalizuje i uwzględni tylko te wypełnienia, których potrzebujesz.

Aby użyć tej flagi, po instalacji:

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

Po prostu dodaj flagę:

useBuiltIns: "usage" 

do pliku konfiguracyjnego Babel o nazwie „babel.config.js” (również nowy w Babel @ 7), w sekcji „@ babel / env”:

// file: babel.config.js

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

   return { presets };
};

Odniesienie:

• użycie # polyfill
• babel-polyfill # usage-in-node-browserify-webpack
• babel-preset-env # usebuiltins

Aktualizacja, sierpień 2019 r .:

Wraz z wydaniem Babel 7.4.0 (19 marca 2019 r.) @ Babel / polyfill jest przestarzałe. Zamiast instalować @ babe / polyfill, zainstalujesz core-js:

npm install --save core-js@3

Nowy wpis corejszostanie dodany do twojego 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 };
};

patrz przykład: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Odniesienie:

• 7.4.0 Wydano: core-js 3, statyczne metody prywatne i częściowe zastosowanie
• core-js @ 3, babel i spojrzenie w przyszłość

Jeśli plik package.json wygląda mniej więcej tak:

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

Otrzymujesz Cannot find module 'babel/polyfill'komunikat o błędzie, prawdopodobnie musisz zmienić instrukcję importu OD:

import "babel/polyfill";

DO:

import "babel-polyfill";

I upewnij się, że pojawia się przed jakimkolwiek innym importstwierdzeniem (niekoniecznie w punkcie wejścia do aplikacji).

Źródła: https://babeljs.io/docs/usage/polyfill/

Po pierwsze, oczywista odpowiedź, której nikt nie udzielił, musisz zainstalować Babel w swojej aplikacji:

npm install babel --save

(lub babel-corejeśli zamiast tego chcesz require('babel-core/polyfill')).

Poza tym mam podstawowe zadanie transpozycji moich es6 i jsx jako kroku kompilacji (tj. Nie chcę używać babel/register, dlatego staram się używać babel/polyfillbezpośrednio w pierwszej kolejności), więc chciałbym położyć większy nacisk na tę część odpowiedzi @ ssube:

Upewnij się, że potrzebujesz go w punkcie wejścia do aplikacji, zanim cokolwiek innego zostanie wywołane

Napotkałem jakiś dziwny problem, w którym próbowałem wymagać babel/polyfillod jakiegoś pliku startowego środowiska współdzielonego i otrzymałem błąd, do którego odwołał się użytkownik - myślę, że mógł to mieć coś wspólnego z tym, jak zamówienia importu babel w porównaniu z wymaganiami, ale nie mogę odtworzyć teraz. W każdym razie, przeniesienie import 'babel/polyfill'pierwszej linii w skryptach startowych klienta i serwera rozwiązało problem.

Zauważ, że jeśli zamiast tego chcesz użyć require('babel/polyfill'), upewnię się, że wszystkie inne instrukcje modułu ładującego również są wymagane i nie używają importu - unikaj mieszania tych dwóch. Innymi słowy, jeśli masz jakiekolwiek instrukcje importu w swoim skrypcie startowym, wprowadź import babel/polyfillpierwszy wiersz skryptu zamiast require('babel/polyfill').

babel-polyfill umożliwia korzystanie z pełnego zestawu funkcji ES6 poza zmianami składni. Obejmuje to funkcje, takie jak nowe wbudowane obiekty, takie jak Promises i WeakMap, a także nowe metody statyczne, takie jak Array.from lub Object. assign.

Bez babel-polyfill, babel pozwala tylko na używanie funkcji takich jak funkcje strzałkowe, destrukturyzacja, domyślne argumenty i inne specyficzne dla składni funkcje wprowadzone w 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

Jak Babel mówi w dokumentacji , dla Babel> 7.4.0 moduł @ babel / polyfill jest przestarzały , więc zaleca się bezpośrednie użycie bibliotek core-js i regenerator-runtime, które wcześniej były zawarte w @ babel / polyfill.

Więc to zadziałało dla mnie:

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

następnie dodaj na samej górze początkowego pliku js:

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