'Symbol' ไม่ได้กำหนดไว้ใน IE หลังจากใช้ babel

ฉันมีreactjsแอปที่เขียนโดยใช้มาตรฐาน ES6 และฉันใช้webpackเพื่อสร้างมัน webpackโหลดโมดูลใช้js babel-loaderเพื่อความเฉพาะเจาะจงฉันใช้แพ็คเกจเวอร์ชันต่อไปนี้: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

อย่างไรก็ตามหลังจากที่สร้างมัน IE 10 'Symbol' is undefinedให้ข้อผิดพลาดดังต่อไปนี้ ไม่babelควรจะกำหนดSymbol? มีการกำหนดค่าเฉพาะสำหรับwebpackหรือbabelต้องตั้งค่าเพื่อให้ใช้งานได้หรือไม่ ฉันใช้{stage: 0}การกำหนดค่าใน.babelrcไฟล์.

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมขอบคุณ!

คุณสามารถกำหนดให้ polyfill ในจุดเข้าสู่โค้ดของคุณเพื่อที่จะรวมเข้ากับ JavaScript ส่วนที่เหลือ

ทางเลือกหนึ่งคือใช้:

require('babel-polyfill');

หรือ:

import 'babel-polyfill';

จากข้อมูลทั้งหมดที่ได้อธิบายไว้ในเอกสาร

โอเคในที่สุดฉันก็พบว่าbabelเพียงอย่างเดียวไม่มีโพลีฟิลล์ การรวมสคริปต์<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>ช่วยแก้ปัญหานี้ให้ฉัน

วิธีนี้จะได้ผลแน่นอนมันใช้ได้ผลสำหรับฉันเมื่อฉันพบข้อผิดพลาด: 'Symbol' ไม่ได้กำหนดไว้ใน IE มันทำงานได้ก่อนหน้านี้ใน Chrome และ Firefox แต่ IE กำลังแสดงข้อผิดพลาดนี้ฉันใช้เวลาสองสามชั่วโมงในการค้นหาวิธีแก้ปัญหานี้ ฉันใช้ React ล่าสุดในเวลานี้ react "react": "^ 16.5.0" บนเครื่อง windows

1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-react": "^6.24.1"
  }

2. In index.js, add

    import babelPolyfill from 'babel-polyfill';

ปัญหาควรได้รับการแก้ไข

ตกลงฉันมีปัญหาเดียวกัน แต่ในกรณีของฉันมันค่อนข้างแตกต่างกันดังนั้นโดยพื้นฐานแล้วคุณต้องรวมสคริปต์ในไฟล์ดัชนีดังต่อไปนี้:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

แต่ในกรณีของฉันฉันรวมสิ่งนั้นไว้แล้วหลังจากการตรวจสอบบางอย่างฉันพบว่าพร็อกซีของฉันบล็อกสคริปต์ ...

ดังนั้นตรวจสอบให้แน่ใจว่าคุณรวมไว้ใน index.html และตรวจสอบให้แน่ใจว่าคุณสามารถเข้าถึงสคริปต์ได้จากที่ที่คุณต้องการเพื่อหลีกเลี่ยงข้อผิดพลาดที่เกิดขึ้น ... วิธีที่ดีที่สุดเพียงแค่คัดลอกและวาง url ในเบราว์เซอร์ ...

แต่ตอนนี้เรามาถึงจุดนี้ไม่ได้พูดถึง Symbol เองอะไรคือ Symbol ที่ไม่สามารถจดจำได้ใน IE?

ฟังก์ชัน Symbol () ส่งคืนค่าสัญลักษณ์ชนิดมีคุณสมบัติคงที่ซึ่งแสดงสมาชิกหลายตัวของอ็อบเจ็กต์ในตัวมีเมธอดแบบคงที่ที่แสดงรีจีสทรีสัญลักษณ์ส่วนกลางและคล้ายกับคลาสอ็อบเจ็กต์ในตัว แต่ไม่สมบูรณ์ในฐานะตัวสร้างเนื่องจาก ไม่รองรับไวยากรณ์ "new Symbol ()"

ทุกค่าสัญลักษณ์ที่ส่งคืนจาก Symbol () ไม่ซ้ำกัน ค่าสัญลักษณ์อาจใช้เป็นตัวระบุคุณสมบัติของวัตถุ นี่คือวัตถุประสงค์เดียวของประเภทข้อมูล คำอธิบายเพิ่มเติมเกี่ยวกับวัตถุประสงค์และการใช้งานสามารถพบได้ในรายการอภิธานศัพท์สำหรับ Symbol

สัญลักษณ์ชนิดข้อมูลเป็นชนิดข้อมูลดั้งเดิม

ในเอกสารเกี่ยวกับ Runtime

// in bash
npm install babel-transform-runtime --save-dev

// in gulpfile
.pipe(babel({
  plugins: ['transform-runtime']
}))

แก้ไข: ยังดีกว่าสำหรับ heroku ในโหมด prod ใช้ - บันทึกแทน --save-dev

หากคุณได้รับข้อผิดพลาดนี้ในแอป Angular คุณต้องยกเลิกการแสดงความคิดเห็นบรรทัดต่อไปนี้ใน polyfills.ts -

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';