捆綁聚合物組件的最佳實踐

Question

Polymer dist /文件夾只有一個HTML文件https://github.com/Polymer/polymer/tree/master/dist ，帶有HTML導入和腳本標簽。 大多數聚合物元素甚至沒有dist文件夾。 提供單個分發包文件（例如polymer.js）並對那里的每個可用聚合物元素執行相同操作，不是一個好習慣嗎？

這種方法有一些明顯的優點：

1. Minimum http requests to get the polymer core or a polymer element. 
2. Easy to use for the clients, just include the required element.

示例：依賴於其他共享元素的元素，

- shared-element: /webcomponents/font-roboto/roboto.js
- custom-element1: uses shared-element
- custom-element2: uses shared-element

使用custom-element1和custom-element2的應用程序僅通過一個http請求下載一次/webcomponents/font-roboto/roboto.js。

<script src="../webcomponents/webcomponentsjs/webcomponents.js"></script>
<script src="../webcomponents/custom-element1/custom-element1.js"></script>
<script src="../webcomponents/custom-element2/custom-element2.js"></script>

PS：上面的custom-element1.js與custom-element1.html所做的事情相同，希望可以方便地以編程方式加載和訪問組件。

我想聽聽聚合物團隊或其他聚合物開發人員/用戶關於他們遵循的最佳實踐的信息。

Answer 1

如果我對您的理解正確，那么您想要的是硫化。 截至撰寫本文時，對於聚合物1.0，說明如下：

如果您有一個使用許多HTML導入的輸入HTML文件element.html，則可以通過Vulcanize運行它，如下所示：

vulcanize elements.html -o elements.vulcanized.html

-o或--output標志會將輸出定向到名為elements.vulcanized.html的新文件。 如果省略-o標志，則Vulcanize會將輸出打印到stdout，如果要將其通過管道傳遞到另一個命令，這將很有用。

elements.vulcanized.html現在包含一個elements.html版本，其中所有導入都已內聯，並且相關性已展平。 除在JavaScript中設置的URL之外，任何URL的路徑都會自動針對新的輸出位置進行調整。

您可以以標志的形式將其他選項傳遞給Vulcanize。 有關受支持標志的完整列表，請參見官方的Vulcanize文檔。

這是上面相同的示例。 額外的標志告訴Vulcanize刪除注釋，並將外部腳本和CSS文件合並到硫化文件中。

vulcanize -o elements.vulcanized.html elements.html --strip-comments --inline-scripts --inline-css

https://www.polymer-project.org/1.0/tools/optimize-for-production.html