ฉันจะติดตั้งไลบรารี babel-polyfill ได้อย่างไร

ฉันเพิ่งเริ่มใช้ Babel เพื่อรวบรวมรหัสจาวาสคริปต์ของ ES6 ลงใน ES5 เมื่อฉันเริ่มใช้สัญญาดูเหมือนว่าจะไม่ทำงาน เว็บไซต์ของ Babel สนับสนุนสัญญาผ่าน polyfills

ไม่มีโชคฉันพยายามเพิ่ม:

require("babel/polyfill");

หรือ

import * as p from "babel/polyfill";

ฉันจะได้รับข้อผิดพลาดต่อไปนี้ในการบูตแอพของฉัน:

ไม่พบโมดูล 'babel / polyfill'

ฉันค้นหาโมดูล แต่ดูเหมือนว่าฉันขาดพื้นฐานบางอย่างที่นี่ ฉันยังพยายามเพิ่ม NPM ครามเก่าและดี แต่ดูเหมือนว่ามันไม่ทำงาน

จะใช้โพลีฟิลส์จากบาเบลได้อย่างไร?

สิ่งนี้เปลี่ยนไปเล็กน้อยใน Babel v6

จากเอกสาร:

polyfill จะเลียนแบบสภาพแวดล้อม ES6 แบบเต็ม polyfill นี้ถูกโหลดโดยอัตโนมัติเมื่อใช้ babel-node

การติดตั้ง:
$ npm install babel-polyfill

การใช้งานใน Node / Browserify / Webpack:
หากต้องการรวม polyfill คุณจำเป็นต้องใช้ที่ด้านบนของจุดเข้าใช้งานของคุณ
require("babel-polyfill");

การใช้งานในเบราว์เซอร์:
พร้อมใช้งานจากdist/polyfill.jsไฟล์ภายในbabel-polyfillรุ่น npm ต้องรวมไว้ก่อนรหัสบาเบลที่รวบรวมไว้ทั้งหมดของคุณ คุณสามารถเติมมันลงในโค้ดที่คอมไพล์แล้วหรือรวมไว้ในโค้ด<script>ก่อนหน้าก็ได้

หมายเหตุ: อย่าrequireนี้ผ่าน browserify ฯลฯ babel-polyfillการใช้งาน

เอกสารบาเบลอธิบายเรื่องนี้สวยรัดกุม:

Babel มี polyfill ที่รวมรันไทม์และกำเนิดใหม่ที่กำหนดเอง

สิ่งนี้จะเลียนแบบสภาพแวดล้อม ES6 แบบเต็ม polyfill นี้ถูกโหลดโดยอัตโนมัติเมื่อใช้ babel-node และ babel / register

ตรวจสอบให้แน่ใจว่าคุณต้องการที่จุดเข้าสู่แอปพลิเคชันของคุณก่อนที่สิ่งอื่นใดจะถูกเรียก หากคุณใช้เครื่องมือเช่น webpack มันจะค่อนข้างง่าย (คุณสามารถบอก webpack ให้รวมไว้ในชุดข้อมูล)

หากคุณกำลังใช้เครื่องมือเช่นgulp-babelหรือbabel-loaderคุณต้องติดตั้งbabelแพคเกจเองเพื่อใช้งาน polyfill

โปรดทราบว่าสำหรับโมดูลที่มีผลต่อขอบเขตทั่วโลก (polyfills และสิ่งที่คล้ายกัน) คุณสามารถใช้การนำเข้า terse เพื่อหลีกเลี่ยงการใช้ตัวแปรที่ไม่ได้ใช้ในโมดูลของคุณ:

import 'babel/polyfill';

สำหรับ Babel เวอร์ชัน 7 หากคุณใช้ @ babel / preset-env เพื่อรวม polyfill ทั้งหมดที่คุณต้องทำคือเพิ่มแฟล็ก 'useBuiltIns' ด้วยค่า 'การใช้งาน' ในการตั้งค่า babel ของคุณ ไม่จำเป็นต้องมีหรือต้องการนำเข้า polyfill ที่จุดเข้าใช้งานของแอพของคุณ

ด้วยการตั้งค่าสถานะนี้ babel @ 7 จะปรับให้เหมาะสมและรวมเฉพาะสิ่งที่คุณต้องการ

ในการใช้การตั้งค่าสถานะนี้หลังจากการติดตั้ง:

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

เพียงเพิ่มธง:

useBuiltIns: "usage" 

ไปยังไฟล์การตั้งค่า babel ของคุณที่เรียกว่า "babel.config.js" (หรือใหม่กับ Babel @ 7) ภายใต้ส่วน "@ babel / env":

// file: babel.config.js

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

   return { presets };
};

อ้างอิง:

• การใช้งาน # polyfill
• Babel-polyfill # การใช้งานในโหนด browserify-webpack
• Babel-ที่ตั้งไว้-env # usebuiltins

อัปเดตเมื่อสิงหาคม 2562:

ด้วยการเปิดตัว Babel 7.4.0 (19 มีนาคม 2019) @ babel / polyfill แทนที่จะติดตั้ง @ babe / polyfill คุณจะติดตั้ง core-js:

npm install --save core-js@3

รายการใหม่corejsจะถูกเพิ่มใน 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 };
};

ดูตัวอย่าง: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

อ้างอิง:

• 7.4.0 ปล่อยตัว: core-js 3, วิธีส่วนตัวแบบคงที่และการประยุกต์ใช้บางส่วน
• core-js @ 3, babel และมองไปสู่อนาคต

หาก package.json ของคุณมีลักษณะดังนี้:

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

และคุณได้รับCannot find module 'babel/polyfill'ข้อความแสดงข้อผิดพลาดคุณอาจต้องเปลี่ยนคำสั่งการนำเข้าจาก:

import "babel/polyfill";

ถึง:

import "babel-polyfill";

และตรวจสอบให้แน่ใจก่อนimportแถลงการณ์อื่น ๆ(ไม่จำเป็นที่จุดเริ่มต้นของใบสมัครของคุณ)

การอ้างอิง: https://babeljs.io/docs/usage/polyfill/

ก่อนอื่นคำตอบที่ชัดเจนที่ไม่มีใครให้คุณต้องติดตั้ง Babel ลงในใบสมัครของคุณ:

npm install babel --save

(หรือbabel-coreถ้าคุณต้องการแทนrequire('babel-core/polyfill'))

นอกเหนือจากนั้นฉันมีงานที่ทำเสียงฮึดฮัดเพื่อโอนย้าย es6 และ jsx ของฉันเป็นขั้นตอนการสร้าง (เช่นฉันไม่ต้องการใช้babel/registerซึ่งเป็นสาเหตุที่ฉันพยายามใช้babel/polyfillโดยตรงในตอนแรก) ดังนั้นฉันต้องการ ให้ความสำคัญกับส่วนนี้ของคำตอบของ @ ssube:

ตรวจสอบให้แน่ใจว่าคุณต้องการที่จุดเข้าสู่แอปพลิเคชันของคุณก่อนที่สิ่งอื่นใดจะถูกเรียก

ฉันพบปัญหาแปลก ๆ ที่ฉันต้องการbabel/polyfillจากไฟล์เริ่มต้นระบบที่ใช้งานร่วมกันและฉันได้รับข้อผิดพลาดจากการอ้างอิงของผู้ใช้ - ฉันคิดว่าอาจมีบางอย่างเกี่ยวกับวิธีการนำเข้าคำสั่งซื้อของ Babel เทียบกับที่ต้องการ ตอนนี้ อย่างไรก็ตามการย้ายimport 'babel/polyfill'เป็นบรรทัดแรกในทั้งไคลเอนต์และสคริปต์เริ่มต้นเซิร์ฟเวอร์ของฉันแก้ไขปัญหาได้

โปรดทราบว่าหากคุณต้องการใช้require('babel/polyfill')ฉันจะตรวจสอบให้แน่ใจว่าคำสั่งโมดูลโหลดเดอร์อื่น ๆ ของคุณทั้งหมดนั้นต้องใช้และไม่ใช้การนำเข้า - หลีกเลี่ยงการผสมทั้งสอง ในคำอื่น ๆ ถ้าคุณมีงบนำเข้าใด ๆ ในบทเริ่มต้นของคุณให้บรรทัดแรกในสคริปต์ของคุณมากกว่าimport babel/polyfillrequire('babel/polyfill')

babel-polyfill ช่วยให้คุณใช้คุณสมบัติครบชุดของ ES6 นอกเหนือจากการเปลี่ยนแปลงทางไวยากรณ์ ซึ่งรวมถึงคุณสมบัติต่างๆเช่นวัตถุในตัวใหม่เช่นสัญญาและ WeakMap เช่นเดียวกับวิธีการคงที่ใหม่เช่น Array.from หรือ Object.assign

โดยไม่มี babel-polyfill, babel จะอนุญาตให้คุณใช้คุณสมบัติเช่นฟังก์ชั่นลูกศร, การทำลายล้าง, อาร์กิวเมนต์เริ่มต้นและคุณสมบัติเฉพาะไวยากรณ์อื่น ๆ ที่แนะนำใน 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

เช่นเดียวกับ Babel กล่าวในเอกสารสำหรับ Babel> 7.4.0 โมดูล@ babel / polyfill เลิกใช้ดังนั้นจึงแนะนำให้ใช้core-jsและregenerator-runtimeโดยตรงไลบรารีซึ่งก่อนหน้านี้รวมอยู่ใน @ babel / polyfill

ดังนั้นนี่ทำงานสำหรับฉัน:

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

จากนั้นเพิ่มไปที่ด้านบนสุดของไฟล์ js เริ่มต้นของคุณ:

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