爲什麼wecomponentsjs/custom-elements-es5-adapter.js不起作用

我將Polymer應用程序轉換爲Polymer 2.我將組件更改爲ES6 Class語法（是的，我知道我可以將它們留在v1.7中混合風格，但我希望他們是ES6類）。爲什麼wecomponentsjs/custom-elements-es5-adapter.js不起作用

然而當我transpile代碼回到ES5（與BabelJS）我碰到一個已知的問題就ES5「類」延伸自然元素（https://github.com/babel/babel/issues/4480）。

我試過了babel-plugin-transform-custom-element-classes，但沒有奏效。 所以我嘗試了webcomponents墊片旨在解決這個問題：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

通知我，包括自定義元素-ES5-adapter.js，也注意到JS的面板使用ES6 /巴貝爾。

如果您刪除自定義元素-ES5-adapter.js和改變JS面板正常使用Javascript（不ES6 /巴貝爾），那麼一切工作正常。

你可以包括或刪除t他的適配器（離開ES6/Babel）和錯誤基本上是一樣的，除了包含適配器時，它來自適配器代碼：未能構建'HTMLElement'：請使用'new'運算符，這個DOM對象構造函數不能作爲函數調用。

我一定在做些傻事？有任何想法嗎？

來源

2017-04-07 devlop

嗯，我在做一些愚蠢的事情。我應該嘗試升級我的Babel軟件包。

將BabelJS從6.23.1升級到最新的6.24.1，並解決了問題。：P

來源

2017-04-08 15:01:45 devlop

我被困在同一個問題。

這個問題是由於我的構建鏈（gulp）轉譯了項目的每個js文件。但是custom-elements-es5-adapter.js文件不能被轉譯成工作。轉儲一切，但這個文件。

來源

2017-06-29 19:44:18

我有類似的問題，我找到了適合我的解決方案。

聲明：我不使用應用程序外殼，因爲我有一個服務器端渲染站點，只有客戶端上的一些孤立的聚合物組件。

經過緊張的調試問題歸結爲一個事實，即我是包括這個塊（聚合物的建議指南）：

<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-10 02:14:14

爲什麼wecomponentsjs/custom-elements-es5-adapter.js不起作用

回答

相關問題