React SPA的前端構建

本檔案說明使用原型建立以React架構為基礎的單一頁面應用程式(SPA)時所建立專案的詳細資訊。 例如,將frontendModule選項設為react時。

概覽

此專案是以create-react-app啟動。

此應用程式的建立AEM目的是使用網站的模型。 它會使用@adobe/cq-react-editable-components套件中的輔助元件自動產生版面。

指令碼

在項目目錄中,可以運行以下命令:

npm start

npm start

此命令會從執行於http://localhost:4502的本機例項中代理JSON模型,以開發模式AEM執行應用程式。 這假定整個項目已部署至AEM少一次(在項目根目錄中為mvn clean install -PautoInstallPackage)。

ui.frontend目錄中執行npm start後,您的應用程式會自動在您的瀏覽器中開啟(位於路徑http://localhost:3000/content/<appId>/<country>/<language>/home.html)。 如果您進行編輯,頁面會重新載入。

如果您收到與CORS相關的錯誤,您可能會想要設定AEM如下:

  1. 導覽至Configuration Manager(http://localhost:4502/system/console/configMgr)
  2. 開啟「Adobe花崗岩跨原始資源共用政策」的設定
  3. 使用下列附加值建立新設定:
    • 允許的來源:http://localhost:3000
    • 支援的標題:授權
    • 允許的方法:OPTIONS

npm test

npm test

此命令會在互動式監視模式中啟動測試執行者。 如需詳細資訊,請參閱關於執行測試的React檔案

npm run build

npm run build

此命令會將生產應用程式建置至組建資料夾。 它以生產模式捆綁了React ,並優化了構建以獲得最佳效能。 如需詳細資訊,請參閱 React說明檔案

此外,AEM使用aem-clientlib-generator套件從應用程式產生ClientLib。

瀏覽器支援

依預設,此專案會使用Browserslist的預設選項來識別目標瀏覽器。 此外,它還包含現代語言功能的填色,以支援舊版瀏覽器(例如Internet Explorer 11)。 如果不需要支援此類瀏覽器,則可移除填色相依性和匯入。

代碼拆分

React應用程式依預設設定為使用程式碼分割。 當建立生產用的應用程式時,程式碼會以數個區塊輸出:

$ ls build/static/js
2.5b77f553.chunk.js
2.5b77f553.chunk.js.map
main.cff1a559.chunk.js
main.cff1a559.chunk.js.map
runtime~main.a8a9905a.js
runtime~main.a8a9905a.js.map

只有在需要時載入區塊才能大幅改善應用程式效能。

若要使用此功能AEM,應用程式必須能夠識別哪些JS和CSS檔案需要從產生的HTML中請AEM求。 這可使用asset-manifest.json檔案中的「entrypoints」索引鍵來達成。 該檔案在clientlib.config.js中進行解析,並且只將entrypoint檔案捆綁到ClientLib中。 其餘的檔案將放在ClientLib的資源目錄中,並且會動態地請求,因此只有在實際需要時才會載入。

有關項目原型如何使用AEMClientLibs的詳細資訊,請參閱一般ui.frontend模組檔案

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now