从 ng build 支持的参数 --prod,谈谈 Angular workspace configuration

语法:ng build project optionswebpack

做用:编译 Angular 应用到 output 文件夹里,一般名称为 dist. 必须在工做空间目录下执行。
git

输入参数:project, 能够为应用或者 library.github

支持的参数

使用 ng build --help 查看全部支持的参数。web

其中这个选项值得一说:--prodshell

Shorthand for "--configuration=production".npm

是 --configuration=production 的简写形式。json

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

将 build configuration 设置成 production target.ide

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的原创文章,尽在:"汪子熙":