Babel kullanıldıktan sonra IE'de 'sembol' tanımsız

reactjsES6 standartları kullanılarak yazılmış bir uygulamam var ve onu webpackoluşturmak için kullanıyorum. webpackYükleri jskullanarak modülleri babel-loader. Spesifik olmak gerekirse, aşağıdaki paket sürümlerini kullanıyorum: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Ancak, onu oluşturduktan sonra, IE 10 aşağıdaki hatayı veriyor 'Symbol' is undefined. 'Nin babeltanımlaması gerekmiyor Symbolmu? Çalışması için belirli bir yapılandırma var mı webpackveya babelayarlamam gerekiyor mu? {stage: 0}Yapılandırmasını kullanıyorum .babelrc.

Herhangi bir yardım memnuniyetle karşılanacaktır, teşekkür ederim!

Kodunuzun giriş noktasında çoklu doldurmayı zorunlu kılabilirsiniz, böylece JavaScript'in geri kalanıyla birlikte gelir.

Bir seçenek kullanmaktır:

require('babel-polyfill');

Veya:

import 'babel-polyfill';

Bunların tümü belgelerde açıklanmıştır .

Tamam, sonunda babeltek başına polyfill yapmadığını öğrendim . Komut dosyası dahil etmek <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>bu sorunu benim için çözdü.

Bu çözüm kesinlikle işe yarayacak, hatayla karşılaştığımda benim için çalıştı: 'Sembol' IE'de tanımsız. Daha önce Chrome ve Firefox'ta çalıştı ama IE bu hatayı atıyordu.Bu çözümü bulmam birkaç saatimi aldı. Şu anda Windows makinesinde "react": "^ 16.5.0" tepkisini en son React'i kullanıyorum.

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';

Sorun çözülmeli

Tamam, ben de aynı sorunu yaşadım, ancak benim durumumda oldukça farklıydı, bu nedenle temelde aşağıdaki gibi indeks dosyasına komut dosyası eklemeniz gerekiyor:

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

Ama benim durumumda bunu zaten ekledim, bazı araştırmalardan sonra proxy'min komut dosyasını engellediğini öğrendim ...

Yani emin olun size index.html içinde yer alıyor ve ayrıca emin olmak iyi yolu sadece kopyalamak ... sen oluyor hatayı önlemek için ihtiyaç duyduğunuz yerden komut dosyasına erişimi olduğunu ve tarayıcıda url yapıştırın ...

Ama şimdi bu noktaya geldiğimizde, Sembol'ün kendisinden bahsetmiyor, IE'de tanınamayan Sembol nedir?

Symbol () işlevi, sembol türü bir değer döndürür, yerleşik nesnelerin birkaç üyesini ortaya çıkaran statik özelliklere sahiptir, global sembol kaydını açığa çıkaran statik yöntemlere sahiptir ve yerleşik bir nesne sınıfına benzer, ancak bir yapıcı olarak eksiktir, çünkü "new Symbol ()" sözdizimini desteklemez.

Symbol () 'den döndürülen her sembol değeri benzersizdir. Nesne özellikleri için bir tanımlayıcı olarak bir sembol değeri kullanılabilir; bu, veri türünün tek amacıdır. Amaç ve kullanım hakkında daha fazla açıklama Sembol için sözlük girişinde bulunabilir.

Veri türü sembolü, ilkel bir veri türüdür.

Runtime ile ilgili belgelerde

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

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

düzenleme: daha da iyisi heroku'da prod modunda --save-dev yerine --save kullanın

Bu hatayı bir Angular uygulamasında alıyorsanız, polyfills.ts'de aşağıdaki satırların açıklamasını kaldırmanız gerekir -

/** 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';