从 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.
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,根据 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.