在我關于 polymer 庫的上一篇教程中，我解釋了如何利用這個出色的新工具來創建可重用的 web 組件。本教程和使用組件的重點是通過以下方式幫助我們進行開發：
- 封裝大部分復雜的代碼和結構
- 允許開發者使用簡單易用的標簽樣式命名約定
- 提供一套預定義的 UI 元素以供利用和擴展
我仍然對它著迷，并希望通過查看 Polymer 團隊發布的新模板來進一步探索這一點，該模板使部署和重用變得更加容易。
規范路徑
我沒有提及的 Polymer 開發過程的怪癖之一是開發組件與實際使其可供其他人重用之間的脫節。讓我們看一下我之前教程中的一個片段：
<link rel="import" href="../bower_components/polymer/polymer.html">
此代碼的目的是包含 Polymer 核心，它是允許您定義自定義元素的主要 API。對于本地開發和測試，這實際上非常有效，但不幸的是指定的路徑實際上會阻止您共享此組件。這樣做的原因是，如果其他用戶嘗試使用 Bower 安裝您的元素（這是首選安裝方法），它將最終作為 Polymer 的同級元素出現在他們的 bower_components 文件夾中。
問題在于該組件將尋找 ../bower_components/polymer/polymer.html 這將是一個無效路徑。組件必須始終假設它們的依賴項是同級的，因此它實際上應該尋找 ../polymer/polymer.html。這就是“規范路徑”。
在與 Polymer 團隊的 Rob Dodson 聊天時，他說解決這個問題的唯一方法是使用我最初概述的方法進行開發，一旦我準備好共享我的組件，就轉換我尋找的所有路徑當我準備好發布我的元素時，將 bower_components 轉移到 ../ 。
這顯然并不理想，我可能可以創建某種類型的 Grunt 任務來解析我的組件文件以進行這些更新。值得慶幸的是，Polymer 團隊一直在研究這個問題，并提出了一個創造性的解決方案，他們稱之為 untitled-element。
untitled-element 模板
當我提到 untitled-element 時，我指的是一個新的樣板，它為您提供了一個可使用的基礎，使創建可重用和可部署的組件變得更加容易。它有助于消除我上面提到的問題：
- 提供有關正確目錄結構的指導
- 合并一個用于記錄您的 API 的附加組件
- 允許您在開發期間和共享時輕松演示您的組件
這樣做的最大好處是能夠開發您的組件，而不必經歷進行大量路徑更改的麻煩，這些更改不僅很麻煩，而且如果您錯過某些內容，可能會破壞您的元素。
目前，該項目是 PolymerLabs 的一部分，因為它已經完成了它的步伐，但它看起來確實相當可靠：
現在您要做的第一件事是創建一個開發目錄，用于容納您的新組件以及您將安裝的所有 Bower 組件。我稱我的為 polymerdev。從那里，您需要轉到 untitled-element Github 存儲庫并將其下載到新的開發文件夾中。這是重要的一步，因為您需要將內容提取到該文件夾??中，以避免我之前提到的同級目錄問題。
提取 .zip 文件將創建一個名為 untitled-element-master 的新文件夾，其中包含創建新組件所需的樣板文件。您需要根據組件的名稱重命名一些內容。這包括：
- untitled-element-master 文件夾
- untitled-element.html
- untitled-element.css
我將重新創建我在上一個教程中創建的 Reddit 元素，因此更改如下：
- untitled-element-master -> reddit-element
- untitled-element.html -> reddit-element.html
- untitled-element.css -> reddit-element.css
這是目錄之前的樣子：
這是更新后的樣子：
要理解的關鍵是，在創建組件時，您將在 reddit-element 文件夾中工作，并且在后續步驟中，當我們使用 Bower 安裝 Polymer 組件時，該目錄將是直接新安裝的目錄的同級。我知道我確實在強調這一點，但理解這一點很重要，因為它會影響您共享組件的能力。
要完成此操作，您需要更新以下文件中對組件名稱的引用：
- bower.json
- demo.html
- reddit-element.html
每個文件都在代碼中包含對 untitled-element 的引用，需要更新。請記住，任何對 untitled-element 的引用都應更改為 reddit-element。如果您想絕對確定，請使用編輯器進行全局搜索和替換。
獲取 Bower 設置
由于 Bower 是安裝 Polymer 和共享組件的首選方法，因此讓我們完成幾個步驟以確保正確設置 Reddit 組件的 Bower 配置。
默認情況下，樣板文件包含 bower.json 文件。該文件用于列出一些內容，包括組件的名稱以及需要安裝才能使用它的任何依賴項。它看起來像這樣：
{ "name": "reddit-element", "private": true, "dependencies": { "polymer": "Polymer/polymer#master" } }
首先，我將刪除 private 屬性，因為它會阻止該組件在 Bower 注冊表中列出。因為它應該是可共享的，所以我希望將其列出。另外，Reddit 組件需要進行 Ajax 調用，因此我包含了對 Polymer core-elements 組件集的依賴，其中包括我需要的 Ajax 功能。最后，我將添加一個版本號來跟蹤后續情況。最終結果如下：
{ "name": "reddit-element", "version": "0.0.1", "dependencies": { "polymer": "Polymer/polymer#~0.2.3", "core-elements": "Polymer/core-elements#~0.2.3", } }
需要完成的 Bower 配置的最后一點是在 reddit-element 文件夾中創建一個名為 .bowerrc 的文件，該文件定義了組件依賴項的自定義安裝位置。它被定義為簡單的 JSON 數據，如下所示：
{ "Directory": "../" }
這本質上是告訴 Bower 將所有依賴項安裝到上一級，以便它們成為 reddit-element 文件夾的同級文件夾。這很重要的原因是，當有人使用 Bower 安裝我們的組件時，它將被放置到 bower_components 文件夾中，作為其中其他所有內容（包括 Polymer）的同級文件夾。以這種方式構建事物，可以確保我們以最終共享的相同方式進行開發。它還允許我們使用上面提到的規范路徑，確保在代碼中引用其他組件的方式一致。
讓我們回顧一下差異。如果我沒有創建 .bowerrc 文件并運行 bower install 命令，我的目錄結構將如下所示：
這會將 bower_components 文件夾直接安裝到組件的目錄中，這不是我想要的。我希望 reddit-element 文件夾成為它所需的所有依賴項的同級文件夾：
此方法確保當用戶使用 Bower 安裝此組件時，該組件和依賴項將正確安裝到 bower_components 文件夾中。
將 .bowerrc 文件添加到組件的文件夾中，并使用正確的依賴項設置 bower.json 后，下一步是運行 bower install，讓 Bower 拉下相應的組件并添加它們到項目。
接下來
在本教程中，我想確保為如何使用新的聚合物樣板以及團隊做出的設計選擇背后的一些基本原理奠定了堅實的基礎。
在本系列的下一部分中，我將介紹樣板文件中包含的新文檔組件，以及它將如何使組件的共享和演示變得更加容易。我還將向您展示如何設置要通過 Bower 注冊表共享的組件。
