Bagaimana cara menginstal pustaka babel-polyfill?

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?

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.

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';

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:

• penggunaan # polyfill
• babel-polyfill # use-in-node-browserify-webpack
• babel-preset-env # usebuiltins

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:

• 7.4.0 Dirilis: core-js 3, metode privat statis dan aplikasi parsial
• core-js @ 3, babel dan melihat ke masa depan

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/

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').

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

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';