babel을 사용한 후 IE에서 '심볼'이 정의되지 않음

babel을 사용한 후 IE에서 '심볼'이 정의되지 않음

나는 가지고 있다reactjsES6 표준을 사용하여 작성된 앱으로,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에서 'Symbol'이 정의되어 있지 않습니다.Chrome과 Firefox에서는 동작했지만 IE에서는 이 에러가 발생하고 있었습니다.이 해결책을 찾는 데 몇 시간이 걸렸습니다.Windows 머신에서 최신 React react를 사용하고 있습니다.^16.5.0 입니다.

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']
}))

edit: prod 모드의 heroku에서는 --save-dev 대신 --save를 사용하는 것이 좋습니다.

Angular 앱에서 이 오류가 발생할 경우 다음 행을 폴리필에서 주석 해제해야 합니다.

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

언급URL : https://stackoverflow.com/questions/33828840/symbol-is-undefined-in-ie-after-using-babel