如何使用 babel 为 safari 9 编译编译好的 svelte

Question

设置：webpack 运行宁 svelte-loader 然后 babel-loader

问题：即使其他旧浏览器现在可以运行精简代码，safari 9 也会失败

TypeError: type error

在 HTMLElement class 上对 _isNativeFunction() 的 babel 调用。

Answer 1

似乎 svelte 在它的一些编译代码中扩展了 HTMLElement class，而 babel 显然会将这个 class 的扩展替换为 _wrapNativeSuper(HTMLElement) 因为那不是 ES5。

wrapNativeSuper 是一个 babel 方法，最终调用 _isNativeFunction，_isNativeFunction 期望传递一个函数。不幸的是，在较旧的 safari 中（并且仅在较旧的 safari 中），HTMLElement 不是函数，因此 _isNativeFunction 会抛出此类型错误，即使代码在理论上被转译以用于 safari 9!

到目前为止，我发现的 hacky 解决方案来自以下大约 2015 年的关于 safari 方面的帖子：

https://github.com/google/traceur-compiler/issues/1709

https://github.com/babel/babel/issues/1548

Should I write v1 Custom Elements in a way that is backwards compatible with v0 API?

所以看起来这个 hack 在过去是众所周知的 - 基本上只是添加一个 shim 允许 HTMLElement 像函数一样响应：

if (typeof HTMLElement !== 'function'){
    var _HTMLElement = function(){};
    _HTMLElement.prototype = HTMLElement.prototype;
    HTMLElement = _HTMLElement;
}

我在加载我的任何前端资源之前放入了上面的代码，它很有魅力。

进一步的问题：这样做有什么危险吗？有没有更好的办法？这是 babeljs 作为 safari 9 支持的一部分应该处理的事情吗？

如何使用 babel 为 safari 9 编译编译好的 svelte

How to transpile compiled svelte with babel for safari 9

safari

babeljs

svelte

babel-loader