https://sap.github.io/spartacus-docs/reference-app-structure/

該概念在 SAP Spartacus 3.1 版本引入。

這個 Reference App Structure 是 SAP 推薦客戶在搭建自己的 Spartacus Storefront 時所用的參考。

Spartacus 包含若干可以 lazy load 的 feature libraries.

> Customizations and third-party code add further complexity, and you can end up with modules that are difficult to maintain because they mix too many of these elements together.

定製化和第三方程式碼進一步增加了專案複雜度，如果處理不得當，很容易出現堆砌了大量 module，難於維護的情況。

> This can be solved by defining and adhering to a standardized structure, such as the Spartacus reference app structure.

而遵循 Spartacus reference app structure 來開發，就能避免此類問題出現。

> Having a standardized structure also makes it easier to onboard new developers to your project, to handle external support cases, and to take care of audits.

有一套標準的工程結構，也便於新開發人員進入專案後，快速熟悉專案並上手。

## 結構

![](https://img-blog.csdnimg.cn/img_convert/dc0e8b9cfe86895304e8ca37865dfa5b.png)

## 1. AppModule

![](https://img-blog.csdnimg.cn/img_convert/ccb7940171ab65bf60ea0cb41cecc1f1.png)

## 2. SpartacusModule
![](https://img-blog.csdnimg.cn/img_convert/c4f8d55acfefed8782d3717e1c56ad9b.png)

## 3.BaseStorefrontModule

![](https://img-blog.csdnimg.cn/img_convert/f76ee859d786fad792bf3423558b8a12.png)

從 @spartacus/storefront 裡匯入，再匯出。

## 4.SpartacusFeatureModule

![](https://img-blog.csdnimg.cn/img_convert/c7bc8820758a6a12b3c0e2b8a138a61c.png)

## 5. feature related modules

![](https://img-blog.csdnimg.cn/img_convert/7eba8f011beb84a4a5140f429f718901.png)

## 6. 配置 module

![](https://img-blog.csdnimg.cn/img_convert/68b46a54cff95d0d5d437e33fc22194d.png)

> Every Angular application has a root app module, usually named AppModule. In the reference app strcuture, this module includes application-wide imports, and avoids complex module imports related to Spartacus by handling only one SpartacusModule.

每個 Angular 應用都有一個 root app module，通常命名為 AppModule. 在 SAP Spartacus reference app structure 裡，AppModule 包含了應用層級的 imports：

![](https://img-blog.csdnimg.cn/img_convert/9a5454806522a8bc22e6370c9c179c30.png)

> Both Angular Router and NgRx are used by Spartacus, but these affect the global application, so they are kept outside of the SpartacusModule and are imported directly in the AppModule.

從上圖可見，StoreModule 和 EffectsModule 等 module，因為整個應用的其他定製開發很可能也會用到，因此直接在 AppModule 裡 import，而沒有放到 SpartacusModule 裡。

SpartacusModule 包含三部分：

![](https://img-blog.csdnimg.cn/img_convert/50c530bc9d9d7599ef015814bbe4a869.png)

1. The BaseStorefrontModule, which encapsulates core Spartacus imports that are usually required by most Spartacus applications.

包含了任何 Spartacus 應用都必需的 imports.

> The BaseStorefrontModule is imported directly from @spartacus/storefront.

2. The SpartacusFeaturesModule, which encapsulates Spartacus features.

![](https://img-blog.csdnimg.cn/img_convert/5431173a0083cf303a4726aac0768a39.png)

Spartacus feature 又分為兩部分：來自 @Spartacus/storefront 和 features 資料夾下的 modules.

3. The SpartacusConfigurationModule, which encapsulates the general Spartacus configuration.

配置資訊：
![](https://img-blog.csdnimg.cn/img_convert/183d08eae3cfea9fe73121de61cb9bcb.png)

> Feature-specific configurations can be kept either in feature modules, or in the SpartacusConfigurationModule. Keeping them in feature modules helps to maintain a good separation of concerns, so it is generally recommended.

feature 相關的配置資訊，推薦放到 feature modules 裡，從而遵循關注點分離的原則。

SAP Spartacus Reference App Structure

相關文章