'Symbol' 在使用 babel 后在 IE 中未定义

Question

我有一个使用 ES6 标准编写的 reactjs 应用程序，我使用 webpack 来构建它。 webpack 使用 babel-loader 加载 js 模块。具体来说，我使用以下版本的包： ├── 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 的任何特定配置才能使其正常工作吗？我在 .babelrc.

中使用 {stage: 0} 配置

如有任何帮助，我们将不胜感激，谢谢！

Answer 1

好吧，我最终发现 babel 本身并没有 polyfill。包括脚本 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> 为我解决了这个问题。

Answer 2

您可以在代码的入口点要求 polyfill，这样它将与 JavaScript 的其余部分捆绑在一起。

一种选择是使用：

require('babel-polyfill');

或者：

import 'babel-polyfill';

所有这些都在 the documentation 中进行了解释。

Answer 3

在有关运行时的文档中

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

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

编辑：更好的是在生产模式下的 heroku 上使用 --save 而不是 --save-dev

Answer 4

好的，我有同样的问题，但在我的情况下完全不同，所以基本上你需要在索引文件中包含脚本，如下所示：

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

但就我而言，我已经包含了这一点，经过一些调查后我发现我的代理阻止了脚本...

所以确保将其包含在index.html中并且确保您可以从哪里访问脚本您需要它来避免错误发生...最好的方法是将 url 复制并粘贴到浏览器中...

不过说到这里，不是在说Symbol本身，什么是IE无法识别的Symbol？

The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class but is incomplete as a constructor because it does not support the syntax "new Symbol()".

Every symbol value returned from Symbol() is unique. A symbol value may be used as an identifier for object properties; this is the data type's only purpose. Some further explanation about purpose and usage can be found in the glossary entry for Symbol.

The data type symbol is a primitive data type.

Answer 5

这个解决方案肯定有效，当我遇到错误时它对我有效：'Symbol' 在 IE 中未定义。它在 Chrome 和 Firefox 中工作得更早，但 IE 抛出这个 error.It 花了我几个小时才找到这个解决方案。我此时正在使用最新的 React react "react": "^16.5.0" on windows machine.

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

'Symbol' 在使用 babel 后在 IE 中未定义

'Symbol' is undefined in IE after using babel

reactjs

webpack

babeljs