"Символ" не визначено в 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>вирішив цю проблему для мене.

Це рішення буде працювати точно, воно працювало для мене, коли я зіткнувся з помилкою: "Символ" не визначений в IE. Раніше це працювало в Chrome і Firefox, але IE викидав цю помилку. Мені знадобилося кілька годин, щоб знайти це рішення. На даний момент я використовую останню версію 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-адресу в браузер ...

Але тепер, коли ми дійшли до цього моменту, мова не йде про сам символ, який символ неможливо розпізнати в IE?

Функція Symbol () повертає значення символу типу, має статичні властивості, що відкривають кілька членів вбудованих об'єктів, має статичні методи, що відкривають глобальний реєстр символів, і нагадує вбудований клас об'єктів, але є неповним як конструктор, оскільки він не підтримує синтаксис "new Symbol ()".

Кожне значення символу, яке повертається із Symbol (), є унікальним. Значення символу може використовуватися як ідентифікатор властивостей об’єкта; це єдине призначення типу даних. Деякі додаткові пояснення щодо призначення та використання можна знайти в глосарії для символу.

Символ типу даних - примітивний тип даних.

в документації про час виконання

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

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

редагувати: ще краще на герою в режимі продукту використовувати --save замість --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';