2017-08-29 52 views
0

我已經給出了使用Material Design來編寫Adobe Experience Manager中的組件的任務,以瞭解樣式和功能。我已經完成了一半 - 我已經將材質設計的CSS導入到AEM組件中,並且工作正常。如何將材料設計組件添加到Adobe Experience Manager

但是,我不知道如何讓材質設計的Javascript部分在我的組件中工作。據我瞭解,您必須逐個將Javascript文件添加到您的clientlib文件夾中,然後將它們添加到您的js.txt文件中。

材料設計在他們的庫中有幾十個和幾十個單獨的JS文件,我無法想象我需要將它們全部一一添加到我的clientlib

獲得材料設計與AEM一起使用的任何提示?

+0

你只需要捆綁包,而不是每個開發文件。 – TheRealMrCrowley

回答

1

如果我理解你的問題正確的話,你要包括原料成分JS從圖書館您參考:material-components-web

要做到這一點,你可以從這個鏈接下載完整的縮小的庫:https://unpkg.com/material-components-web/dist/material-components-web.min.js 我發現在材料組件getting started guide 之後,您還可以從發佈的npm依賴項(如果您有npm項目)中包含它。

可以包括JS在你目前clientlib或create a clientlib與JS包括(不會進入關於如何創建clientlibs細節,因爲這不是問題)

另外,如果你不想包括整個材料庫,你寧願選擇你的clientlib中包含哪些組件,你將不得不通過WebPack或任何其他JS捆綁器創建一個捆綁包,WebPack是最流行的。要解釋WebPack需要很長的回答,谷歌周圍,你會發現很多示例配置和項目。我發現這個回購有一個材料組件的入門項目:https://github.com/vardius/web-components-webpack-es6-boilerplate

+0

謝謝,艾哈邁德!這正是我最終選擇的解決方案(使用unpkg.com鏈接獲取縮小文件)。 –

+0

@JohnP我真的很好奇你用材料Web組件構建的組件,它是偶然開源的嗎? –

+0

不幸的是,我正在構建的實際組件不是開源的。它是大型專有客戶支付門戶網站的一部分。 –