对象不支持 Edge 上的属性或方法“匹配”答案

【问题标题】：Object doesn't support property or method 'matches' on Edge对象不支持 Edge 上的属性或方法“匹配”
【发布时间】：2017-08-04 17:17:44
【问题描述】：

我正在使用 gulp 和 babel 将 ES6 转录为 ES5。这是我的代码：

gulpfile.babel.js

import gulp from 'gulp';
import babel from 'gulp-babel';
gulp.src([appDir + 'js/**/*.js', '!' + appDir + 'js/{vendors,vendors/**}'])
        .pipe(babel({
            presets: ['es2015'],
            plugins: ['transform-runtime']
        }))
        .pipe(gulp.dest(devDir + 'js'));

package.json

"devDependencies": {
    "babel-core": "*",
    "babel-plugin-transform-runtime": "*",
    "babel-preset-es2015": "*",
    "gulp": "*",
    "gulp-babel": "*",
  }

.babelrc

{
  "presets": [
    "es2015"
  ],
  "plugins": ["transform-runtime"]
}

在除 IE11 和 Edge 之外的所有浏览器上一切正常。

IE11有错误：

“符号”未定义

边缘有错误：

对象不支持“匹配”属性或方法

我希望将这个插件"plugins": ["transform-es2015-typeof-symbol"] 添加到 .babelrc 文件中可以解决“符号”未定义的问题，但不是！

我是否缺少 babel 的一些特殊设置或转换插件？

【问题讨论】：

你的依赖列表中有babel-plugin-transform-runtime，但你还没有在 Babel 的配置中启用它。将两个问题合二为一通常也不是一个好主意。您对matches 的问题与 Babel 或 Gulp 或 ES6 完全无关。
我已经更新了代码，但是我现在有新的错误：ReferenceError: require is not defined
使用您展示的构建过程，没有什么可以正确处理import 和export。如果你在浏览器中加载模块导入/导出，你会想要使用 Webpack。
我没有在 JS 中使用导入或导出。

标签： ecmascript-6 gulp internet-explorer-11 microsoft-edge babeljs

【解决方案1】：

您需要从 CDN 加载 https://cdnjs.com/libraries/babel-polyfill，因为您没有使用模块捆绑程序。我就放弃了

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

在你的其他 JS 文件之前进入你的页面。

至于您关于matches 的错误，您必须通过查看您的代码来弄清楚。使用 Element#matches 的代码将无法在旧版 IE 上运行，因为该方法不存在或使用了不同的名称。

【讨论】：

非常感谢，这个 polyfill 解决了我的问题。我还为元素匹配创建了 polyfill。我以为 babel 也会为我解决这个问题。为什么某些功能必须使用自定义 polyfill？
Babel 转换了 Concert 语法，因此会抛出语法错误的代码将被转换为在 ES5 语法中有效的代码。提供非语法特征是 polyfill 的工作。你几乎总是想要两者。
谢谢你的解释，现在我终于知道为什么要用polyfill了:)