Символ не определен в IE после использования babel

Question

У меня есть 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,

Любая помощь будет оценена, спасибо!

Answer 1

Хорошо, я в конце концов узнал, что babel один не делает полифилл. Включая скрипт <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> решил эту проблему для меня.

Answer 2

Вы можете потребовать полифил в точке входа в ваш код, чтобы он был связан с остальной частью JavaScript.

Одним из вариантов является использование:

require('babel-polyfill');

Или же:

import 'babel-polyfill';

Все это объясняется в документации.

Answer 3

Это решение будет работать наверняка, оно сработало для меня, когда я обнаружил ошибку: "Символ" не определен в 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';

Проблема должна быть решена

Answer 4

ОК, у меня была та же проблема, но в моем случае она была совершенно другой, поэтому в основном вам нужно включить скрипт в индексный файл, как показано ниже:

<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() возвращает значение типа symbol, имеет статические свойства, которые предоставляют несколько членов встроенных объектов, имеет статические методы, которые предоставляют глобальный реестр символов, и напоминает встроенный объектный класс, но является неполным в качестве конструктора, поскольку он не поддерживает синтаксис "новый символ ()".

Каждое значение символа, возвращаемое из Symbol(), является уникальным. Значение символа может использоваться в качестве идентификатора для свойств объекта; это единственная цель типа данных. Некоторое дальнейшее объяснение цели и использования можно найти в глоссарии для Symbol.

Символ типа данных является примитивным типом данных.

Answer 5

В документации о Runtime

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

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

редактировать: еще лучше на героку в режиме prod использовать --save вместо --save-dev

Answer 6

Если вы получаете эту ошибку в приложении 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';