在AEM as a Cloud Service上使用使用者端資料庫 using-client-side-libraries

數位體驗高度依賴由複雜的JavaScript和CSS程式碼驅動的使用者端處理。 AEM使用者端資料庫(clientlibs)可讓您整理並集中儲存存放庫中的這些使用者端資料庫。 結合AEM專案原型中的前端建置程式，管理您AEM專案的前端程式碼變得簡單。

在AEM中使用clientlibs的優點包括：

Clientlibs是內建的解決方案，可從AEM傳遞CSS和JavaScript。

什麼是使用者端資料庫 what-are-clientlibs

網站需要在使用者端處理JavaScript和CSS以及靜態資源，例如圖示和網頁字型。 clientlib是AEM的機制，可供參考（必要時可依類別分類）並提供這些資源。

AEM會將網站的CSS和JavaScript收集至單一檔案（位於中央位置），確保HTML輸出中只包含任何資源的一個副本。 這樣可最大化傳送效率，並透過Proxy在存放庫中集中維護這類資源，以確儲存取安全。

AEM as a Cloud Service的前端開發 fed-for-aemaacs

所有JavaScript、CSS和其他前端資產都應在AEM專案原型的ui.frontend模組中維護。原型的彈性可讓您使用您選擇的現代網路工具來建立和管理這些資源。

然後，原型可以將資源編譯為單一CSS和JS檔案，並自動將其嵌入儲存庫中的cq:clientLibraryFolder。

使用者端資源庫資料夾結構 clientlib-folders

使用者端程式庫資料夾是型別cq:ClientLibraryFolder的存放庫節點。 CND表示法中的定義為

[cq:ClientLibraryFolder] > sling:Folder
  - dependencies (string) multiple
  - categories (string) multiple
  - embed (string) multiple
  - channels (string) multiple

每個cq:ClientLibraryFolder都會填入一組JS和/或CSS檔案，以及一些支援檔案（請參閱下文）。 cq:ClientLibraryFolder的重要屬性設定如下：

如果使用者端程式庫資料夾包含一或多個來源檔案，在執行階段會將其合併至單一JS和/或CSS檔案。 產生的檔案名稱是副檔名為.js或.css的節點名稱。 例如，名為cq.jquery的程式庫節點會產生名為cq.jquery.js或cq.jquery.css的檔案。

使用者端程式庫資料夾包含下列專案：

建立使用者端資料庫資料夾 creating-clientlib-folders

使用者端資料庫必須位於/apps下。 此規則是更好地將程式碼從內容和設定隔離所必需的。

為了能夠存取/apps下的使用者端程式庫，使用Proxy servelt。 ACL仍強制在使用者端程式庫資料夾上，但如果allowProxy屬性設定為true，則servlet允許透過/etc.clientlibs/讀取內容。

服務使用者端程式庫 serving-clientlibs

您的使用者端程式庫資料夾一旦視需要設定，您就可以透過Proxy要求clientlibs。 例如：

allowProxy屬性可讓您要求：

透過HTL載入使用者端資料庫 loading-via-htl

一旦您的clientlibs成功儲存和管理在其使用者端程式庫資料夾中，即可透過HTL存取。

使用者端程式庫是透過AEM提供的Helper範本載入，該範本可透過data-sly-use存取。 此檔案中有協助程式範本可用，可透過data-sly-call呼叫。

每個 helper 範本都需要 categories 選項來參照所需的用戶端程式庫。 這個選項可以是字串值陣列，或是包含逗號分隔值清單的字串。

如需透過HTL載入clientlibs的詳細資訊，請參閱HTL檔案。

作者與Publish上的使用者端資料庫 clientlibs-author-publish

大部分的clientlibs在AEM發佈執行個體上都是必要的。 也就是說，大部分clientlibs的目的是製作內容的一般使用者體驗。 對於發佈執行個體上的clientlibs，前端建置工具可以透過使用者端資料庫資料夾使用和部署，如上所述。

不過，有時可能需要使用使用者端資料庫來自訂編寫體驗。 例如，自訂對話方塊可能需要將少量的CSS或JS部署至AEM編寫執行個體。

管理作者上的使用者端資料庫 clientlibs-on-author

如果您需要在作者上使用使用者端資料庫，可以使用與發佈相同的方法在/apps下建立使用者端資料庫，但直接在/apps/.../clientlibs/foo下撰寫它，而不是建立整個專案來管理它。

然後，您可以將使用者端程式庫新增至現成可用的使用者端程式庫類別，以「連結」至編寫JS。

偵錯工具 debugging-tools

AEM提供數個工具，用於偵錯和測試使用者端程式庫資料夾。

探索使用者端資料庫 discover-client-libraries

/libs/cq/granite/components/dumplibs/dumplibs元件會產生系統上所有使用者端程式庫資料夾的資訊頁面。 /libs/granite/ui/content/dumplibs節點將元件作為資源型別。 若要開啟頁面，請使用下列URL （視需要變更主機和連線埠）：

https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html

資訊包括程式庫路徑和型別（CSS或JS）以及程式庫屬性的值（例如類別和相依性）。 頁面上的後續表格會顯示每個類別和管道中的程式庫。

檢視產生的輸出 see-generated-output

dumplibs元件包含一個測試選擇器，顯示為ui:includeClientLib標籤產生的原始程式碼。 此頁面包含不同js、css和主題屬性組合的程式碼。

其他Client Library資料夾功能 additional-features

AEM中的使用者端程式庫資料夾還支援其他幾項功能。 不過，AEM as a Cloud Service上並不要求這些字元，因此不建議使用。 為了完整起見，此處列出它們。

AdobeGraniteHTMLLibrary Manager html-library-manager

其他使用者端程式庫設定可透過位於https://<host>:<port>/system/console/configMgr的系統主控台的​ AdobeGraniteHTML庫管理員 ​面板來控制。

其他資料夾屬性 additional-folder-properties

其他資料夾屬性包括允許控制相依性和內嵌，但通常不再需要這些屬性，不建議使用：

連結至相依性 linking-to-dependencies

當使用者端程式庫資料夾中的程式碼參考其他程式庫時，請將其他程式庫識別為相依性。 參照使用者端程式庫資料夾的ui:includeClientLib標籤會導致HTML程式碼包含您產生的程式庫檔案和相依性的連結。

相依性必須是另一個cq:ClientLibraryFolder。 若要識別相依性，請使用下列屬性將屬性新增至您的cq:ClientLibraryFolder節點：

例如，/etc/clientlibs/myclientlibs/publicmain在cq.jquery資料庫上有相依性。 參考主要使用者端程式庫的頁面會產生包含以下程式碼的HTML：

<script src="/etc/clientlibs/foundation/cq.jquery.js" type="text/javascript">
<script src="/etc/clientlibs/mylibs/publicmain.js" type="text/javascript">

從其他程式庫內嵌程式碼 embedding-code-from-other-libraries

您可以將使用者端程式庫的程式碼內嵌到另一個使用者端程式庫中。 在執行階段中，內嵌程式庫產生的JS和CSS檔案會包含內嵌程式庫的程式碼。

內嵌程式碼有助於提供對存放庫安全區域中的程式庫的存取權。

應用程式專屬的使用者端資料庫資料夾 app-specific-client-library-folders

最佳實務是將應用程式資料夾中的所有應用程式相關檔案保留在/apps以下。 拒絕網站訪客存取/apps資料夾也是最佳作法。 若要同時滿足這兩個最佳實務，請在/etc資料夾下方建立使用者端資料庫資料夾，該資料夾內嵌在/apps下方的使用者端資料庫。

使用categories屬性來識別要內嵌的使用者端資料庫資料夾。 若要內嵌程式庫，請使用下列屬性將屬性新增至內嵌cq:ClientLibraryFolder節點：

使用內嵌將請求最小化 using-embedding-to-minimize-requests

在某些情況下，您可能會發現發佈執行個體針對典型頁面產生的最終HTML包含相對大量的<script>元素。

在這種情況下，將所有必要的使用者端程式庫程式碼結合到單一檔案中會很有用，這樣就能減少頁面載入上的來回請求數量。 若要這麼做，您可以使用cq:ClientLibraryFolder節點的內嵌屬性，將必要的程式庫embed到您應用程式專屬的使用者端程式庫中。

CSS檔案中的路徑 paths-in-css-files

內嵌CSS檔案時，產生的CSS程式碼會使用與內嵌程式庫相關的資源路徑。 例如，可公開存取的程式庫/etc/client/libraries/myclientlibs/publicmain內嵌/apps/myapp/clientlib使用者端程式庫：

main.css檔案包含下列樣式：

body {
  padding: 0;
  margin: 0;
  background: url(images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

publicmain節點產生的CSS檔案包含下列樣式（使用原始影像的URL）：

body {
  padding: 0;
  margin: 0;
  background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

請參閱HTML輸出中的內嵌檔案 see-embedded-files

若要追蹤內嵌程式碼的來源，或確保內嵌使用者端程式庫產生預期的結果，您可以檢視執行階段內嵌檔案的名稱。 若要檢視檔案名稱，請將debugClientLibs=true引數附加至網頁的URL。 產生的程式庫包含@import個陳述式，而非內嵌程式碼。

在先前內嵌其他程式庫的程式碼區段的範例中，/etc/client/libraries/myclientlibs/publicmain使用者端程式庫資料夾內嵌/apps/myapp/clientlib使用者端程式庫資料夾。 將引數附加至網頁會在網頁的原始程式碼中產生以下連結：

<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">

開啟publicmain.css檔案會顯示下列程式碼：

@import url("/apps/myapp/clientlib/styles/main.css");

使用前置處理器 using-preprocessors

AEM允許可插拔的前處理器，並隨附對CSS和JavaScript的YUI Compressor以及YUI設定為AEM預設前處理器的JavaScript的Google Closure Compiler (GCC)的支援。

可插拔前處理器可彈性使用，包括：

使用情況 usage

您可以選擇為每個使用者端程式庫或系統範圍設定前置處理器組態。

clientlib節點上的前置處理器設定優先於OSGI設定。

格式與範例 format-and-examples

格式 format

config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;

CSS縮制的YUI壓縮程式和JS的GCC yui-compressor-for-css-minification-and-gcc-for-js

cssProcessor: ["default:none", "min:yui"]
jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]

Typescript可進行預先處理，然後使用GCC進行縮小及模糊化 typescript-to-preprocess-and-then-gcc-to-minify-and-obfuscate

jsProcessor: [
   "default:typescript",
   "min:typescript",
   "min:gcc;obfuscate=true"
]

其他GCC選項 additional-gcc-options

failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")

如需GCC選項的詳細資訊，請參閱GCC檔案。

設定系統預設的迷你器 set-system-default-minifier

YUI已設定為AEM中的預設縮制器。 若要將此變更為GCC，請按照以下步驟操作。