关于angular:从-ng-build-支持的参数-prod谈谈-Angular-workspace-configuration

40次阅读

共计 4044 个字符,预计需要花费 11 分钟才能阅读完成。

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

正文完
 0