Question

我在第4行的第4行遇到“ TypeError：构造函数需要'new'运算符”

function PropertiesChanged() {
  var _this;
  babelHelpers.classCallCheck(this, PropertiesChanged);
  _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PropertiesChanged).call(this));
  _this.__dataEnabled = !1;
  _this.__dataReady = !1;
  _this.__dataInvalid = !1;
  _this.__data = {};
  _this.__dataPending = null;
  _this.__dataOld = null;
  _this.__dataInstanceProps = null;
  _this.__serializing = !1;
  _this._initializeProperties();
  return _this
}

这是用Polymer 3编写的我的已编译Web组件的ES5 app.js构建输出的一部分，“ this”是具有this.constructor.name ===“ FeedbackComponent”的对象的实例，这是ES6的初始类名我的PolymerElement。

该组件与Chrome，Firefox，IE10兼容，这使我相信导致上述问题的根本原因在于我的.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      },
      "exclude": ["transform-classes"]
    }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

更新

同时，我意识到聚合物构造实际上并未考虑.babelrc。我创建了一个示例仓库，其中包含我的Web组件配置：https://github.com/robertfoobar/polymer-3-web-component-sample

有人知道如何解决上述问题吗？

Answer 1

Safari 10不支持Web组件！我认为您将必须使用polyfill https://polymer-library.polymer-project.org/3.0/docs/browsers

更新：

Babel使用browserlist来标识您要支持的浏览器，因为其文档说明您的浏览器数组应如下所示：

"browsers": ["last 2 versions", "Safari >= 10"]

Answer 2

Constructor requires 'new' operator（在此设置中）与浏览器的CustomElements支持有关。如我所说，我尝试在Safari中加载组件的ES5表示形式。事实证明这不是必需的，因为Safari 10似乎具有本机CustomElements支持。因此，只要浏览器具有本机定义，我现在就为ES6构建提供服务

window.customElements

这解决了我的问题。

ES5捆绑的Polymer 3组件无法在Safari 10中加载

更新

2 个答案: