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

Question

我在第 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 实际上并没有被 polymer 构建考虑。我创建了一个示例存储库，其中包含我的 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"]