1

我将 Polymer 应用程序转换为 Polymer 2。我正在将组件更改为 ES6 类语法（是的，我知道我可以将它们保留为 v1.7 混合样式，但我希望它们成为 ES6 类）。

但是，当我将代码转译回 ES5（使用 BabelJS）时，我遇到了一个关于 ES5“类”扩展本机元素的已知问题（https://github.com/babel/babel/issues/4480）。

我尝试了 babel-plugin-transform-custom-element-classes 但没有奏效。 所以我尝试了 webcomponents shim 来解决这个问题： https ://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs

但是垫片不起作用！我不知道我做错了什么:(

<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
  /* transpiled to ES5 */
  class YExample extends HTMLElement {}
  customElements.define('y-example', YExample);
</script>

这是我的 jsbin： http ://jsbin.com/feqoniz/edit?html,js,output

请注意，我包含了 custom-elements-es5-adapter.js，还请注意 JS 面板使用的是 ES6/Babel。

如果您删除 custom-elements-es5-adapter.js 并将 JS 面板更改为普通 Javascript（不是 ES6/Babel），那么一切正常。

您可以包含或删除适配器（离开 ES6/Babel），错误基本上是一样的，除了当包含适配器时，它来自适配器代码：Failed to construction 'HTMLElement': Please use the 'new'运算符，这个 DOM 对象构造函数不能作为函数调用。

我一定是在做傻事？有任何想法吗？

4

3 回答 3

1

好吧，我在做一些愚蠢的事情。我应该尝试升级我的 Babel 包。

将 BabelJS 从 6.23.1 升级到最新的 6.24.1 并解决了问题。:P

于 2017-04-08T15:01:45.980 回答
1

我被同样的问题困住了。

问题是由于我的构建链（gulp）转译了项目的每个 js 文件。但是不能将 custom-elements-es5-adapter.js 文件转译为工作。转译除此文件之外的所有内容。

于 2017-06-29T19:44:18.100 回答
1

我遇到了类似的问题，我找到了适合我的解决方案。

免责声明：我不使用应用程序外壳，因为我有一个服务器端渲染站点，客户端只有几个隔离的 Polymer 组件。

经过大量调试后，问题归结为我包含了这个块（如聚合物指南中所建议的那样）：

<div id="autogenerated-ce-es5-shim">
  <script type="text/javascript">
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
      ceShimContainer.parentElement.removeChild(ceShimContainer);
    }
  </script>
  <script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>

因为当我跑的polymer build时候它会从那里捡起来custom-elements-es5-adapter.js。

这就是我所做的：

<script type="text/javascript">
if (window.customElements) {
   document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>

是的，它没有那么优雅和质朴，但是，嘿，它有效！在这里，我欺骗了里面的编译器polymer build，他们找不到这个文件，因此他们不会将它包含在构建中。

我希望它有帮助！

于 2017-07-10T02:14:14.133 回答