語法：ng build project options

作用：編譯 Angular 應用到 output 資料夾裡，通常名稱為 dist. 必須在工作空間目錄下執行。
![](https://img-blog.csdnimg.cn/img_convert/634ae0f26471ab9bb51c1fc68197fa2e.png)

輸入引數：project, 可以為應用或者 library.

# 支援的引數

使用 ng build --help 檢視所有支援的引數。

其中這個選項值得一說：--prod

Shorthand for "--configuration=production".

是 --configuration=production 的簡寫形式。

When true, sets the build configuration to the production target.

將 build configuration 設定成 production target.

> By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.

預設情況下，production target 在工作空間配置中設定，參考[官網](https://angular.io/guide/workspace-config)。

Workspace configuration 對應的檔案是 angular.json.

> A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.

下圖是 SAP Spartacus workspace configuration 內容：

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

* version: The configuration-file version.

* newProjectRoot: Path where new projects are created. Absolute or relative to the workspace folder.

新專案建立，一律放在 feature-libs 資料夾下面。
![](https://img-blog.csdnimg.cn/img_convert/39372e6e58d7af5806fa8164461265e5.png)

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

* defaultProject: Default project name to use in commands, where not provided as an argument. When you use ng new to create a new app in a new workspace, that app is the default project for the workspace until you change it here.

Angular CLI 命令的預設輸入引數。

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

* schematics : A set of schematics that customize the ng generate sub-command option defaults for this workspace.

為該工作空間的 ng generate 子命令提供 Schematics 定製。

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

> When you create a library project with ng generate library, the library project is also added to the projects section.

每個子 project 都有如下結構：
![](https://img-blog.csdnimg.cn/img_convert/ee8840333ec6228a1d22731a0a63d16e.png)

prefix：cx，這個字首施加在 selector 上：A string that Angular prepends to generated selectors. Can be customized to identify an app or feature area.

architect：Configuration defaults for Architect builder targets for this project.

Specify the schematic name for a subcommand in the format schematic-package:schematic-name; for example, the schematic for generating a component is @schematics/angular:component.

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

> The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package 
@schematics/angular.

具體位置：https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/schema.json

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

# Architect

https://angular.io/guide/workspace-config

> Architect is the tool that the CLI uses to perform complex tasks, such as compilation and test running.

Architect 是 Angular CLI 使用的工具，用於執行復雜的任務，比如編譯或者測試。

> Architect is a shell that runs a specified builder to perform a given task, according to a target configuration.

Architect 是一個 shell，執行一個特定的 [builder](https://angular.io/guide/glossary#builder)，根據 [target](https://angular.io/guide/glossary#target) 配置完成一個特定的任務。

## 什麼是 builder

> A function that uses the Architect API to perform a complex process such as "build" or "test". The builder code is defined in an npm package.

使用 Architect API 來執行 build 或者 test 任務的函式. Builder 的原始碼，定義在 npm 包裡。

> For example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests.

例如，BrowserBuilder 為 browser target，執行一個 webpack build.

ng run 命令，會呼叫某個特定的 builder.

angular.json 檔案裡，architect 區域下面定義了若干個 target：
![](https://img-blog.csdnimg.cn/img_convert/27db217fc8a2e65eb0561b05bd329a44.png)

> In addition, each target has an options section that configures default options for the target

每個 target 都有一個 options 選項，能夠配置 target 預設 option.

* build：為 ng build 命令配置 target.

* serve：為 ng serve 命令配置 target，以此類推。

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

自定義的 webpack 配置檔案：
![](https://img-blog.csdnimg.cn/img_convert/06edd137606ae696c16828543dc4a701.png)

options：This section contains default build target options, used when no named alternative configuration is specified.

包含預設的 build target 選項。

# Alternate build configurations

Angular CLI comes with two build configurations: production and development.

> By default, the ng build command uses the production configuration

預設情況下，ng build 使用 production 配置。

Production 配置意味著下列最佳化：

* Bundling files - 將檔案打包合併在一起
* Minimizing excess whitespace - 刪除所有空白字元
* Removing comments and dead code - 刪除註釋和永遠不會執行的程式碼
* Rewriting code to use short, mangled names (minification) - 精簡變數名

> You can define and name additional alternate configurations (such as stage, for instance) appropriate to your development process. Some examples of different build configurations are stable, archive and next used by AIO itself, and the individual locale-specific configurations required for building localized versions of an app.

可以自定義配置，比如 stage，archive 等等。

可以一次性傳入多個配置：ng build --configuration stage,fr

> In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one.

如果多個配置都修改了同一個設定，以最後一個配置為準。

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

# Assets configuration

build 的過程中直接複製的資源。

> Each build target configuration can include an assets array that lists files or folders you want to copy as-is when building your project. By default, the src/assets/ folder and src/favicon.ico are copied over.

從 ng build 支援的引數 --prod，談談 Angular workspace configuration

相關文章