'Ký hiệu' không được xác định trong IE sau khi sử dụng babel

Tôi có một reactjsứng dụng được viết theo tiêu chuẩn ES6 và tôi sử dụng webpackđể xây dựng nó. Các webpacktải các jsmodule sử dụng babel-loader. Để cụ thể, tôi sử dụng các phiên bản sau của gói: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6

Tuy nhiên, sau khi xây dựng nó, IE 10 cho lỗi sau 'Symbol' is undefined. Không nên babelđịnh nghĩa Symbol? Có cấu hình cụ thể nào cho webpackhoặc babeltôi cần thiết lập để làm cho nó hoạt động không? Tôi sử dụng {stage: 0}cấu hình trong của tôi .babelrc.

Bất kỳ sự giúp đỡ sẽ được đánh giá cao, Cảm ơn bạn!

Bạn có thể yêu cầu polyfill trong điểm nhập vào mã của mình để mã này sẽ được kết hợp với phần còn lại của JavaScript.

Một tùy chọn là sử dụng:

require('babel-polyfill');

Hoặc là:

import 'babel-polyfill';

Tất cả những điều đó được giải thích trong tài liệu .

Ok, cuối cùng tôi phát hiện ra rằng babelmột mình không có polyfill. Bao gồm cả tập lệnh đã <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>giải quyết vấn đề này cho tôi.

Giải pháp này chắc chắn sẽ hoạt động, nó phù hợp với tôi khi tôi gặp lỗi: 'Symbol' không được xác định trong IE. Nó đã hoạt động trước đó trên Chrome và Firefox nhưng IE lại gặp phải lỗi này. Tôi mất vài giờ để tìm ra giải pháp này. Tôi đang sử dụng React mới nhất tại thời điểm này react "react": "^ 16.5.0" trên máy tính 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';

Vấn đề sẽ được giải quyết

OK, tôi đã gặp vấn đề tương tự, nhưng trong trường hợp của tôi thì khác, vì vậy về cơ bản bạn cần bao gồm tập lệnh trong tệp chỉ mục như bên dưới:

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

Nhưng trong trường hợp của tôi, tôi đã bao gồm điều đó, sau một số điều tra, tôi phát hiện ra rằng proxy của tôi đã chặn tập lệnh ...

Vì vậy, hãy đảm bảo bạn đưa nó vào index.html và cũng đảm bảo rằng bạn có quyền truy cập vào tập lệnh từ nơi bạn cần để tránh lỗi xảy ra ... cách tốt nhất chỉ cần sao chép và dán url vào trình duyệt ...

Nhưng bây giờ chúng ta đi đến điểm này, nó không nói về chính Biểu tượng, Biểu tượng không thể được nhận dạng trong IE là gì?

Hàm Symbol () trả về một giá trị của biểu tượng kiểu, có các thuộc tính tĩnh hiển thị một số thành viên của các đối tượng tích hợp sẵn, có các phương thức tĩnh để hiển thị sổ đăng ký ký hiệu chung và giống với một lớp đối tượng tích hợp nhưng không hoàn chỉnh như một hàm tạo vì nó không hỗ trợ cú pháp "new Symbol ()".

Mọi giá trị biểu tượng được trả về từ Symbol () là duy nhất. Một giá trị ký hiệu có thể được sử dụng làm định danh cho các thuộc tính đối tượng; đây là mục đích duy nhất của kiểu dữ liệu. Một số giải thích thêm về mục đích và cách sử dụng có thể được tìm thấy trong mục chú giải thuật ngữ cho Symbol.

Biểu tượng kiểu dữ liệu là một kiểu dữ liệu nguyên thủy.

trong tài liệu về Runtime

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

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

chỉnh sửa: tốt hơn trên heroku ở chế độ sử dụng sản phẩm --save thay vì --save-dev

Nếu bạn gặp lỗi này trong ứng dụng Angular, bạn cần bỏ nhận xét các dòng sau trong 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';