Babil-polyfill kütüphanesini nasıl kurabilirim?

Babil'i ES6 javascript kodumu ES5'e derlemek için kullanmaya başladım. Promises'ı kullanmaya başladığımda çalışmıyor gibi görünüyor. Babel web sitesinde çoklu dolgular yoluyla vaatler için destek belirtiliyor.

Herhangi bir şans olmadan, eklemeye çalıştım:

require("babel/polyfill");

veya

import * as p from "babel/polyfill";

Bununla birlikte, uygulama önyüklememde aşağıdaki hatayı alacağım:

'Babel / polyfill' modülü bulunamıyor

Modülü aradım ama görünüşe göre burada bazı temel şeyler eksik. Ayrıca eski ve iyi mavi kuş NPM'yi eklemeye çalıştım ama çalışmıyor gibi görünüyor.

Babil'den çoklu dolgular nasıl kullanılır?

Babil v6'da bu biraz değişti.

Dokümanlardan:

Çoklu dolgu, tam bir ES6 ortamını taklit eder. Babil düğümü kullanılırken bu çoklu dolgu otomatik olarak yüklenir.

Kurulum:
$ npm install babel-polyfill

Düğüm / Browserify / Webpack'te kullanım: Çoklu dolguyu
dahil etmek için uygulamanızın giriş noktasının en üstüne almanız gerekir.
require("babel-polyfill");

Tarayıcıda Kullanımı:
Kullanılabilir dist/polyfill.jsbir dosyaya, babel-polyfillnpm serbest bırakılması. Bu, derlenmiş tüm Babel kodunuzdan önce eklenmelidir. Derlenmiş kodunuza başlayabilir veya bir kodun önüne ekleyebilirsiniz <script>.

NOT: Bunu requirebrowserify vb babel-polyfill. Yoluyla yapmayın, kullanın .

Babel dokümanlar oldukça kısaca bu açıklamaktadır:

Babel, özel bir rejeneratör çalışma zamanı ve core.js içeren bir çoklu dolgu içerir.

Bu, tam bir ES6 ortamını taklit edecektir. Babil düğümü ve babel / register kullanılırken bu çoklu dolgu otomatik olarak yüklenir.

Başka bir şey çağrılmadan önce başvurunuzun giriş noktasında gerekli olduğundan emin olun. Webpack gibi bir araç kullanıyorsanız, bu oldukça basit hale gelir (webpack'e pakete dahil etmesini söyleyebilirsiniz).

gulp-babelVeya gibi bir araç kullanıyorsanız, çoklu dolguyu kullanmak için paketin kendisini babel-loaderde yüklemeniz gerekir babel.

Ayrıca, global kapsamı etkileyen çok modüller için (çoklu dolgular ve benzeri), modülünüzde kullanılmayan değişkenlerin bulunmaması için kısa bir içe aktarma kullanabileceğinizi unutmayın:

import 'babel/polyfill';

Babel sürüm 7 için, @ babel / preset-env kullanıyorsanız, çoklu dolguyu dahil etmek için tek yapmanız gereken babel yapılandırmanıza 'use' değerine sahip bir 'useBuiltIns' bayrağı eklemektir. Uygulamanızın giriş noktasında çoklu dolgu gerektirmez veya içe aktarmaya gerek yoktur.

Bu işaret belirtildiğinde, babel @ 7 optimize eder ve yalnızca ihtiyacınız olan çoklu dolguları içerir.

Bu bayrağı kullanmak için kurulumdan sonra:

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

Bayrağı eklemeniz yeterlidir:

useBuiltIns: "usage" 

"@ babel / env" bölümünün altındaki "babel.config.js" (Babel @ 7 için de yeni) adlı babel yapılandırma dosyanıza:

// file: babel.config.js

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

   return { presets };
};

Referans:

• kullanım # polyfill
• babel-polyfill # kullanım-içinde-düğüm-browserify-webpack
• babel ayarlı-env # usebuiltins

Ağustos 2019'u güncelleyin:

Babel 7.4.0'ın (19 Mart 2019) piyasaya sürülmesiyle @ babel / polyfill kullanımdan kaldırıldı. @ Babe / polyfill kurmak yerine core-js kuracaksınız:

npm install --save core-js@3

corejsBabel.config.js dosyasına yeni bir giriş eklenir

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

örneğe bakın: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Referans:

• 7.4.0 Yayınlandı: core-js 3, statik özel yöntemler ve kısmi uygulama
• core-js @ 3, babil ve geleceğe bakış

Package.json aşağıdaki gibi görünüyorsa:

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

Ve Cannot find module 'babel/polyfill'hata mesajını alırsınız, o zaman muhtemelen içe aktarma ifadenizi FROM'dan değiştirmeniz gerekir:

import "babel/polyfill";

TO:

import "babel-polyfill";

Ve diğer importifadelerden önce geldiğinden emin olun (başvurunuzun giriş noktasında olması gerekmez).

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

Öncelikle, kimsenin sağlamadığı açık cevap, Babel'i başvurunuza yüklemeniz gerekiyor:

npm install babel --save

(veya babel-corebunun yerine isterseniz require('babel-core/polyfill')).

Bunun yanı sıra, es6 ve jsx'imi bir oluşturma adımı olarak aktarmak için bir homurdanma görevim var (yani kullanmak istemiyorum babel/register, bu yüzden babel/polyfilldoğrudan ilk etapta kullanmaya çalışıyorum ), bu yüzden istiyorum @ ssube'nin cevabının bu kısmına daha fazla vurgu yapın:

Başka bir şey çağrılmadan önce başvurunuzun giriş noktasında gerekli olduğundan emin olun

babel/polyfillBazı paylaşılan ortam başlangıç ​​dosyasından talep etmeye çalıştığım bazı garip bir sorunla karşılaştım ve kullanıcının referans aldığı hatayı aldım - babel siparişlerinin ithaline karşı nasıl bir şeyleri olabileceğini düşünüyorum ama yeniden üretemiyorum şimdi. Her neyse, import 'babel/polyfill'hem istemcimde hem de sunucu başlatma komut dosyalarında ilk satır olarak hareket etmek sorunu çözdü.

Bunun yerine kullanmak istiyorsanız require('babel/polyfill'), diğer tüm modül yükleyici ifadelerinizin de zorunlu olduğundan ve içe aktarma kullanmadığından emin olacağım - ikisini karıştırmaktan kaçının. Başka bir deyişle, başlangıç ​​komut dosyanızda içe aktarma ifadeleri varsa, komut dosyanızda import babel/polyfillilk satırı yapmak yerine ilk satırı yapın require('babel/polyfill').

babel-polyfill, sözdizimi değişikliklerinin ötesinde ES6 özelliklerinin tamamını kullanmanızı sağlar. Bu, Promises ve WeakMap gibi yeni yerleşik nesnelerin yanı sıra Array.from veya Object.assign gibi yeni statik yöntemleri de içerir.

Babel-polyfill olmadan, babel yalnızca ok işlevleri, yıkım, varsayılan bağımsız değişkenler ve ES6'da sunulan sözdizimine özgü diğer özellikler gibi özellikleri kullanmanıza izin verir.

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

Babel'in dokümanlarda söylediği gibi, Babel 7.4.0 için @ babel / polyfill modülü kullanımdan kaldırılmıştır , bu nedenle daha önce @ babel / polyfill'e dahil edilen doğrudan core-j'ler ve rejeneratör çalışma zamanı kitaplıklarının kullanılması önerilir .

Bu benim için çalıştı:

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

ardından ilk js dosyanızın en üstüne ekleyin:

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