從 ng build 支持的參數 --prod，談談 Angular workspace configuration

語法：ng build project options

做用：編譯 Angular 應用到 output 文件夾裏，一般名稱爲 dist. 必須在工做空間目錄下執行。

輸入參數：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 在工做空間配置中設置，參考官網。

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 內容：

• version: The configuration-file version.
• newProjectRoot: Path where new projects are created. Absolute or relative to the workspace folder.

新項目建立，一概放在 feature-libs 文件夾下面。

• 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 命令的默認輸入參數。

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

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

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

每一個子 project 都有以下結構：

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.

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/an...

Architect

https://angular.io/guide/work...

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，根據 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：

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，以此類推。

自定義的 webpack 配置文件：

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.

若是多個配置都修改了同一個設置，以最後一個配置爲準。

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.

更多Jerry的原創文章，盡在："汪子熙":