Bagaimana cara menginstal pustaka babel-polyfill?

141

Saya baru saja mulai menggunakan Babel untuk mengkompilasi kode javascript ES6 saya ke ES5. Saat saya mulai menggunakan Promises, sepertinya tidak berfungsi. Situs web Babel menyatakan dukungan untuk promise melalui polyfill.

Tanpa hasil, saya mencoba menambahkan:

require("babel/polyfill");

atau

import * as p from "babel/polyfill";

Dengan itu saya akan mendapatkan kesalahan berikut pada bootstrap aplikasi saya:

Tidak dapat menemukan modul 'babel / polyfill'

Saya mencari modulnya tetapi sepertinya saya kehilangan beberapa hal mendasar di sini. Saya juga mencoba menambahkan NPM bluebird yang lama dan bagus tetapi sepertinya tidak berfungsi.

Bagaimana cara menggunakan polyfill dari Babel?

javascript  node.js  babeljs  polyfills  babel-polyfill 
— Shlomi
sumber
1
npm install _name_
— dandavis
1
CATATAN: Babel sekarang memiliki paket NPM terpisah untuk ini: babel-polyfill
— Stijn de Witt
1
@StijndeWitt hanya untuk menghemat satu klik, berikut adalah file README.md lengkap dalam versi lengkap:
— gurghet
1
@gurghet Ya, mereka dapat menambahkan beberapa info lagi di sana. Saya setuju :) Tapi yang perlu Anda ketahui hanyalah npm install --save babel-polyfilldan require('babel-polyfill).
— Stijn de Witt
1
Karena Anda menggunakan ES6, Anda juga dapat menggunakan import "babel-polyfill".
— Cinta Hasija

Jawaban:

67

Ini sedikit berubah di babel v6.

Dari dokumen:

Polyfill akan meniru lingkungan ES6 penuh. Polyfill ini otomatis dimuat saat menggunakan babel-node.

Instalasi:
$ npm install babel-polyfill

Penggunaan di Node / Browserify / Webpack:
Untuk menyertakan polyfill, Anda harus memerlukannya di bagian atas titik masuk ke aplikasi Anda.
require("babel-polyfill");

Penggunaan di Browser:
Tersedia dari dist/polyfill.jsfile dalam babel-polyfillrilis npm. Ini harus disertakan sebelum semua kode Babel Anda yang dikompilasi. Anda dapat menambahkannya ke kode yang telah dikompilasi atau memasukkannya ke dalam <script>sebelumnya.

CATATAN: Jangan lakukan requireini melalui browserify dll, gunakan babel-polyfill.

— vdclouis.dll
sumber
6
Saya masih belum sepenuhnya yakin kapan polyfill diperlukan. Mengapa modul ES6 hanya bekerja dengan babel.js tetapi Array.protorype.findIndex()tidak bekerja tanpa polyfill dan babel tidak akan memunculkan pengecualian saat transpiling? Apakah itu sifat dari Polyfill ™?
— RemEmber
5
Pada dasarnya Babel polyfill hanya github.com/facebook/regenerator dan github.com/zloirock/core-js gabungan. Lihat 2 repo tersebut untuk mengetahui apakah Anda benar-benar membutuhkan polyfill.
— vdclouis
7
Saya pikir alasan yang satu berfungsi dan yang lainnya tidak adalah karena Babel, saat melakukan transpiling, menargetkan mesin JS hipotetis dengan tingkat dukungan tertentu. Browser yang sebenarnya dapat mendukung lebih atau kurang dari mesin hipotetis ini. Dalam praktiknya, menurut saya, peramban hipotetis yang mereka targetkan ada di tingkat IE10, jadi peramban lama mungkin memiliki beberapa masalah. Dengan meletakkan perbaikan untuk ini dalam polyfill terpisah, mereka menyerahkan keputusan apakah Anda ingin mendukung browser lama tersebut kepada Anda. Sedikit mirip dengan jQuery dengan cabang 1.0 yang mendukung, dan cabang 2.0 yang tidak mendukung IE8. @RemEber
— Stijn de Witt
2
@dougmacklin jika findIndex adalah satu-satunya polyfill yang Anda butuhkan, Anda dapat memasukkannya di suatu tempat dalam kode Anda. Periksa MDN untuk polyfills: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
— vdclouis
1
@vdclouis, bagaimana Anda akan memasukkan kode polyfill melalui webpack sehingga tersedia di mana saja dalam proyek?
— dougmacklin
48

Dokumen Babel menjelaskan ini dengan cukup singkat:

Babel menyertakan polyfill yang menyertakan runtime regenerator khusus dan core.js.

Ini akan meniru lingkungan ES6 penuh. Polyfill ini otomatis dimuat saat menggunakan babel-node dan babel / register.

Pastikan Anda memerlukannya di pintu masuk ke aplikasi Anda, sebelum hal lain dipanggil. Jika Anda menggunakan alat seperti webpack, itu menjadi sangat sederhana (Anda dapat memberi tahu webpack untuk menyertakannya dalam bundel).

Jika Anda menggunakan alat seperti gulp-babelatau babel-loader, Anda juga perlu menginstal babelpaket itu sendiri untuk menggunakan polyfill.

Perhatikan juga bahwa untuk modul yang memengaruhi cakupan global (polyfill dan sejenisnya), Anda dapat menggunakan impor singkat untuk menghindari variabel yang tidak digunakan dalam modul Anda:

import 'babel/polyfill';
— ssube.dll
sumber
4
Hanya untuk menambahkan catatan, dan saya tidak 100% yakin apakah ini sepenuhnya benar, tetapi saya mencoba hanya menggunakan import 'babel-core/polyfill'tanpa menginstal babeldan berhasil dengan baik.
— Nathan Lutterman
2
Zaemz , saya rasa Anda sudah menginstal babel, jadi import 'babel-core/polifyll'berhasil. Saya mencobanya tanpa menginstal babeldan tidak berhasil untuk saya. By the way: saran ssube bekerja.
— WebBrother
4
Saat menggunakan webpack, di mana Anda memasukkannya?
— theptrk
2
@theptrk Dengan menggunakan webpack, Anda dapat mengimpornya sebagai modul, karena webpack mengizinkan impor paket npm. Untuk Karma, Anda mengaturnya sebagai file untuk disertakan sebelum Anda menguji.
— ssube
3
Terima kasih, mungkin saya memiliki versi yang berbeda tetapi saya harus menggunakan babel-core sebagai gantinya => "import 'babel-core / polyfill';
— theptrk
22

Untuk Babel versi 7, jika Anda menggunakan @ babel / preset-env, untuk menyertakan polyfill yang harus Anda lakukan adalah menambahkan tanda 'useBuiltIns' dengan nilai 'usage' dalam konfigurasi babel Anda. Tidak perlu memerlukan atau mengimpor polyfill di titik masuk Aplikasi Anda.

Dengan menetapkan tanda ini, babel @ 7 akan mengoptimalkan dan hanya menyertakan polyfill yang Anda butuhkan.

Untuk menggunakan tanda ini, setelah instalasi:

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

Cukup tambahkan bendera:

useBuiltIns: "usage"

ke file konfigurasi babel Anda yang bernama "babel.config.js" (juga baru di Babel @ 7), di bawah bagian "@ babel / env":

// file: babel.config.js

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

   return { presets };
};

Referensi:

Perbarui Agt 2019:

Dengan dirilisnya Babel 7.4.0 (19 Maret 2019) @ babel / polyfill tidak digunakan lagi. Alih-alih memasang @ babe / polyfill, Anda akan memasang core-js:

npm install --save core-js@3

Entri baru corejsditambahkan ke babel.config.js Anda

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

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

Referensi:

— apollo
sumber
1
Apakah Anda menggunakan ini dalam produksi env? ada resiko?
— Roy
useBuiltIns: "usage"tidak bekerja di sisi saya. Ini hanya tidak menyertakan polyfil dalam bundel (contoh: Saya menggunakan generator dan mendapatkan kesalahan "regeneratorRuntime tidak ditentukan"). Ada ide?
— WebBrother
@WebBrother, bekerja untuk saya ... lihat misalnya: github.com/ApolloTang/stackoverflow-eg--babel-polyfill
— apollo
@Roy, sebenarnya saya sedang dalam proses migrasi project enterprise dari babel @ 6 ke babel @ 7 sehingga saya bisa menggunakan @ babel / preset-typescript. Ini masih dalam pengerjaan, tapi saya mengikuti instruksi dari dokumen resmi babel (lihat link referensi di jawaban saya). Sejauh ini semuanya tampak berfungsi, tetapi saya belum mengirim pekerjaan migrasi / peningkatan saya ke QA, saya akan memposting di sini jika ada masalah.
— apollo
19

Jika package.json Anda terlihat seperti berikut ini:

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

Dan Anda mendapatkan Cannot find module 'babel/polyfill'pesan kesalahan, maka Anda mungkin hanya perlu mengubah pernyataan impor Anda DARI:

import "babel/polyfill";

UNTUK:

import "babel-polyfill";

Dan pastikan itu datang sebelum importpernyataan lain (tidak harus di titik masuk aplikasi Anda).

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

— l3x
sumber
3
Dalam jawaban ini, paket babel-polyfill terdaftar di bawah 'devDependencies'. Melakukan ini akan mengakibatkan babel-polyfill tidak disertakan dalam penerapan. Anda sebaiknya tidak menginstal babel-polyfill dengan -D flag tetapi dengan tanda -S sehingga terdaftar di bawah 'dependencies', dan oleh karena itu disertakan dalam penerapan Anda.
— apollo
9

Pertama, jawaban jelas yang belum disediakan oleh siapa pun, Anda perlu menginstal Babel ke dalam aplikasi Anda:

npm install babel --save

(atau babel-corejika Anda malah ingin require('babel-core/polyfill')).

Selain itu, saya memiliki tugas kasar untuk mentranspilasi es6 dan jsx saya sebagai langkah pembuatan (yaitu saya tidak ingin menggunakan babel/register, itulah sebabnya saya mencoba menggunakanbabel/polyfill secara langsung), jadi saya ingin melakukannya lebih menekankan pada bagian jawaban @ ssube ini:

Pastikan Anda memerlukannya di pintu masuk ke aplikasi Anda, sebelum hal lain dipanggil

Saya mengalami beberapa masalah aneh di mana saya mencoba meminta babel/polyfilldari beberapa file startup lingkungan bersama dan saya mendapatkan kesalahan yang dirujuk pengguna - Saya pikir itu mungkin ada hubungannya dengan bagaimana babel memesan impor versus kebutuhan tetapi saya tidak dapat mereproduksi sekarang. Bagaimanapun, memindahkan import 'babel/polyfill'sebagai baris pertama di skrip startup klien dan server saya memperbaiki masalah.

Perhatikan bahwa jika Anda ingin menggunakan require('babel/polyfill')saya akan memastikan semua pernyataan pemuat modul Anda yang lain juga memerlukan dan tidak menggunakan impor - hindari mencampur keduanya. Dengan kata lain, jika Anda memiliki pernyataan import di skrip startup, buatlah import babel/polyfillbaris pertama di skrip Anda, bukan require('babel/polyfill').

— ChetPrickles
sumber
9
Anda tidak perlu menjalankan sudodengan npm docs.npmjs.com/getting-started/fixing-npm-permissions
— Vladimir Starkov
8

babel-polyfill memungkinkan Anda menggunakan set lengkap fitur ES6 di luar perubahan sintaks. Ini termasuk fitur seperti objek bawaan baru seperti Promises dan WeakMap, serta metode statis baru seperti Array.from atau Object.assign.

Tanpa babel-polyfill, babel hanya mengizinkan Anda untuk menggunakan fitur-fitur seperti fungsi panah, penghancuran, argumen default, dan fitur khusus sintaks lainnya yang diperkenalkan di 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

— zloctb
sumber
1

Seperti yang dikatakan Babel di dokumen , untuk Babel> 7.4.0 modul @ babel / polyfill tidak digunakan lagi , jadi disarankan untuk menggunakan langsung pustaka core-js dan regenerator-runtime yang sebelumnya disertakan dalam @ babel / polyfill.

Jadi ini berhasil untuk saya:

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

lalu tambahkan ke bagian paling atas file js awal Anda:

import 'core-js/stable';
import 'regenerator-runtime/runtime';
— Fred K
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.