angular.json 文件的语法?
options 是 angular.json 文件中 architect 对象中蕴含的一个属性,用于指定构建、测试或运行的选项。以下是 options 反对的一些常见的选项:
- outputPath: 构建输入的目录。
- index: 应用程序的主入口文件。
- main: 应用程序的主模块文件。
- polyfills: 应用程序的 polyfill 文件。
- tsConfig: TypeScript 配置文件的门路。
- assets: 应用程序须要复制到输入目录中的动态文件列表。
- styles: 应用程序的款式文件列表。
- scripts: 应用程序的脚本文件列表。
- preserveSymlinks: 是否保留符号链接。
除此之外,不同的构建器(如 @angular-devkit/build-angular:browser)可能反对不同的选项。具体的选项取决于构建器的实现。能够通过查看相干构建器的文档来理解更多选项信息。
Spartacus Storefront 的具体例子:
angular.json 文件里 builder 字段的 @angular-devkit/build-angular:browser 是什么意思?
在 angular.json 文件中,builder 字段指定了用于构建或执行工作的构建器。@angular-devkit/build-angular:browser 是 Angular CLI 默认应用的构建器之一,用于构建 Angular 应用程序。
@angular-devkit/build-angular 是一个构建工具集,提供了多种构建器,例如:@angular-devkit/build-angular:browser、@angular-devkit/build-angular:server、@angular-devkit/build-angular:dev-server 等。这些构建器提供了不同的性能和选项,以满足不同场景下的构建需要。
@angular-devkit/build-angular:browser 构建器用于构建 Angular 应用程序的浏览器版本。它反对以下性能:
- AOT(Ahead Of Time)编译。
- Tree shaking 和代码压缩。
- Source maps 和 bundle maps。
- 多个环境配置。
- Progressive Web App(PWA)反对。
在 angular.json 文件中,builder 字段中指定的构建器会依据我的项目类型和工作类型主动抉择。对于 Angular 应用程序的构建工作,如果没有指定构建器,那么默认会应用 @angular-devkit/build-angular:browser 构建器。
angular.json 文件里 builder 字段的 @angular-builders/custom-webpack:browser 是什么意思?
@angular-builders/custom-webpack:browser 是一个自定义的构建器,用于在 Angular CLI 我的项目中应用自定义的 webpack 配置文件来构建浏览器应用程序。
默认状况下,Angular CLI 应用 @angular-devkit/build-angular:browser 构建器来构建应用程序,它应用了 Angular 官网举荐的构建配置。但有时候,咱们可能须要依据特定的需要对 webpack 配置文件进行一些自定义配置,例如增加本人的 loader、plugin 等。在这种状况下,咱们能够应用 @angular-builders/custom-webpack:browser 构建器来应用自定义的 webpack 配置文件构建应用程序。
应用 @angular-builders/custom-webpack:browser 构建器须要在 angular.json 文件中指定该构建器,例如:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {"path": "./extra-webpack.config.js"}
}
}
}
在上述例子中,咱们将 builder 字段的值设置为 @angular-builders/custom-webpack:browser,并在 options 中指定了 customWebpackConfig 属性,它的值是一个对象,用于指定自定义的 webpack 配置文件的门路。在这个例子中,咱们将自定义的 webpack 配置文件命名为 extra-webpack.config.js,并将其搁置在我的项目根目录下。
须要留神的是,应用 @angular-builders/custom-webpack:browser 构建器须要对 webpack 配置文件有肯定的理解,否则可能会导致构建失败。能够参考 Angular 官网文档中的相干章节来学习如何配置自定义的 webpack 配置文件。