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

Question

我运行进入 "TypeError: Constructor requires 'new' operator" 在

的第 4 行

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 === [=41= 的对象实例] 这是我的 PolymerElement 的初始 ES6 class 名称。

该组件与 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 中加载

ES5 bundled Polymer 3 component fails to load in Safari 10

javascript

web-component

polymer

polymer-3.x

更新