angular.json 檔案的語法？

options 是 angular.json 檔案中 architect 物件中包含的一個屬性，用於指定構建、測試或執行的選項。以下是 options 支援的一些常見的選項：

- outputPath: 構建輸出的目錄。
- index: 應用程式的主入口檔案。
- main: 應用程式的主模組檔案。
- polyfills: 應用程式的 polyfill 檔案。
- tsConfig: TypeScript 配置檔案的路徑。
- assets: 應用程式需要複製到輸出目錄中的靜態檔案列表。
- styles: 應用程式的樣式檔案列表。
- scripts: 應用程式的指令碼檔案列表。
- preserveSymlinks: 是否保留符號連結。

除此之外，不同的構建器（如 @angular-devkit/build-angular:browser）可能支援不同的選項。具體的選項取決於構建器的實現。可以透過檢視相關構建器的檔案來瞭解更多選項資訊。

Spartacus Storefront 的具體例子：

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

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

angular.json 檔案裡 builder 欄位的 @angular-devkit/build-angular:browser 是什麼意思？

在 angular.json 檔案中，builder 欄位指定了用於構建或執行任務的構建器。@angular-devkit/build-angular:browser 是 Angular CLI 預設使用的構建器之一，用於構建 Angular 應用程式。

@angular-devkit/build-angular 是一個構建工具集，提供了多種構建器，例如：@angular-devkit/build-angular:browser、@angular-devkit/build-angular:server、@angular-devkit/build-angular:dev-server 等。這些構建器提供了不同的功能和選項，以滿足不同場景下的構建需求。

@angular-devkit/build-angular:browser 構建器用於構建 Angular 應用程式的瀏覽器版本。它支援以下功能：

- AOT（Ahead Of Time）編譯。
- Tree shaking 和程式碼壓縮。
- Source maps 和 bundle maps。
- 多個環境配置。
- Progressive Web App（PWA）支援。

在 angular.json 檔案中，builder 欄位中指定的構建器會根據專案型別和任務型別自動選擇。對於 Angular 應用程式的構建任務，如果沒有指定構建器，那麼預設會使用 @angular-devkit/build-angular:browser 構建器。

angular.json 檔案裡 builder 欄位的 @angular-builders/custom-webpack:browser 是什麼意思？

@angular-builders/custom-webpack:browser 是一個自定義的構建器，用於在 Angular CLI 專案中使用自定義的 webpack 配置檔案來構建瀏覽器應用程式。

預設情況下，Angular CLI 使用 @angular-devkit/build-angular:browser 構建器來構建應用程式，它使用了 Angular 官方推薦的構建配置。但有時候，我們可能需要根據特定的需求對 webpack 配置檔案進行一些自定義配置，例如新增自己的 loader、plugin 等。在這種情況下，我們可以使用 @angular-builders/custom-webpack:browser 構建器來使用自定義的 webpack 配置檔案構建應用程式。

使用 @angular-builders/custom-webpack:browser 構建器需要在 angular.json 檔案中指定該構建器，例如：

```json
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      }
    }
  }
}
```

在上述例子中，我們將 builder 欄位的值設定為 @angular-builders/custom-webpack:browser，並在 options 中指定了 customWebpackConfig 屬性，它的值是一個物件，用於指定自定義的 webpack 配置檔案的路徑。在這個例子中，我們將自定義的 webpack 配置檔案命名為 extra-webpack.config.js，並將其放置在專案根目錄下。

需要注意的是，使用 @angular-builders/custom-webpack:browser 構建器需要對 webpack 配置檔案有一定的瞭解，否則可能會導致構建失敗。可以參考 Angular 官方檔案中的相關章節來學習如何配置自定義的 webpack 配置檔案。

Angular 專案中 angular.json builder 欄位的可選項介紹

相關文章