天天看點

Angular 項目裡 angular.json 檔案内容的學習筆記

看一個基于 Angular 的 SAP Spartacus 項目裡 angular.json 的例子:

Angular 項目裡 angular.json 檔案内容的學習筆記

version: The configuration-file version.

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

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.

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

projects : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.

Angular 項目裡 angular.json 檔案内容的學習筆記

Angular generation schematics are instructions for modifying a project by adding files or modifying existing files.

Angular 生成原理圖是一系列指令,用于通過添加新檔案或者修改已有檔案的方式來修改一個項目。

Individual schematics for the default Angular CLI ng generate sub-commands are collected in the package @schematics/angular.

ng generate 子指令各自的原理圖,在 @schematics/angular 包裡維護。

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.

給子指令指定原理圖的文法:schematic-package + 冒号 + schematic-name,例如 @schematics/angular:component,用于生成一個 Component.

什麼是 architect

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

Architect 是 CLI 使用的工具,用來執行複雜任務,比如編譯代碼和運作測試。

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

Architect 是一個 shell,運作一個特定的 builder,根據一個 target 配置來執行某種任務。

Default Architect builders and targets

Angular defines default builders for use with specific CLI commands, or with the general ng run command.

Angular 為特定的 CLI 指令定義預設 builder.

The JSON schemas that define the options and defaults for each of these default builders are collected in the

@angular-devkit/build-angular

package.

每個預設 builder 的 options 定義的 JSON schemas,定義在 @angular-devkit/build-angular 開發包裡:

Angular 項目裡 angular.json 檔案内容的學習筆記

比如 ng serve, 執行的 builder 是 @angular-devkit/build-angular:dev-server:A development server that provides live reloading.

Angular 項目裡 angular.json 檔案内容的學習筆記

什麼是 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.

Builder 是一種 function,使用 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.

Angular 項目裡 angular.json 檔案内容的學習筆記

The schemas configure options for the following builders.

app-shell

browser

dev-server

extract-i18n

karma

protractor

server

tslint

The architect section of angular.json contains a set of Architect targets.

angular.json 的 architect 區域包含了一系列 Architect targets.

Angular 項目裡 angular.json 檔案内容的學習筆記

Each target object specifies the builder for that target, which is the npm package for the tool that Architect runs.

每個 target 都指定一個 builder,該 builder 為該 target 服務。builder 的實作位于一個 npm package 裡。

Angular 項目裡 angular.json 檔案内容的學習筆記

The npm package for the build tool used to create this target. The default builder for an application (ng build myApp) is @angular-devkit/build-angular:browser, which uses the webpack package bundler.

預設使用 webpack 的 package bundler 來完成 ng build.

Note that a different builder is used for building a library (ng build myLib).

The architect/extract-i18n section configures defaults for options of the ng extract-i18n command, which extracts marked message strings from source code and outputs translation files.

生成可供翻譯的 translation files.

The architect/server section configures defaults for creating a Universal app with server-side rendering, using the ng run :server command.

生成支援伺服器端渲染的 SSR 應用。

The architect/app-shell section configures defaults for creating an app shell for a progressive web app (PWA), using the ng run :app-shell command.

建立一個用于 PWA 應用的 app shell.

assets 配置

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.

靜态資源檔案。

assets 裡的通配符

Angular 項目裡 angular.json 檔案内容的學習筆記

glob: A node-glob using input as base directory.

input: A path relative to the workspace root.

output: A path relative to outDir (default is dist/project-name). Because of the security implications, the CLI never writes files outside of the project output path.

由于安全考慮,CLI 絕對不會在項目 output path 之外寫入檔案。

ignore: A list of globs to exclude.

followSymlinks: Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched. Defaults to false.

可以用 glob 的這個功能,從項目檔案夾之外的位置拷貝檔案到 outdir 去。

例如:

Angular 項目裡 angular.json 檔案内容的學習筆記
Angular 項目裡 angular.json 檔案内容的學習筆記

效果:

The contents of node_modules/some-package/images/ will be available in dist/some-package/.

budgets

Default size-budget type and threshholds for all or parts of your app. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size.

例子:

Angular 項目裡 angular.json 檔案内容的學習筆記

2021-7-13 Tuesday

SAP Spartacus 的一個例子:

工作區是若幹項目的集合。一個工作區隻有一個全局的 angular.json 檔案:

Angular 項目裡 angular.json 檔案内容的學習筆記

裡面能看到這個工作區裡所有包含的項目,其類型為 application 或者 library:

Angular 項目裡 angular.json 檔案内容的學習筆記
Angular 項目裡 angular.json 檔案内容的學習筆記