看一个基于 Angular 的 SAP Spartacus 项目里 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 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 开发包里:

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

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

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.

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 里。

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 里的通配符

  • 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 去。

例如:

"assets": [{"glob": "**/*","input": "./node_modules/some-package/images","output": "/some-package/"}
]

效果:

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.

例子:

2021-7-13 Tuesday

SAP Spartacus 的一个例子:

工作区是若干项目的集合。一个工作区只有一个全局的 angular.json 文件:

里面能看到这个工作区里所有包含的项目,其类型为 application 或者 library:

更多Jerry的原创文章,尽在:“汪子熙”:

更多Jerry的原创文章,尽在:“汪子熙”:

2022-1-4 更新

ng run project:target[:configuration]

project: 项目名称,定义在 angular.json 的 name 字段里。

target 定义在 angular.json 的 architect 区域。

ng run command runs an Architect target with an optional custom builder configuration defined in angular.json in your project. Here project is the name of the application as defined in angular.json.

上述配置会更新 dist 文件夹下 lazyload 的 server 和 browser 文件夹:

更多Jerry的原创文章,尽在:“汪子熙”:

Angular 项目里 angular.json 文件内容的学习笔记相关推荐

  1. Linux对文件内容基本操作(学习笔记七)

    一.cat 1.1.查看文件内容 格式:cat 文件名 [root@model /]# cat /etc/resolv.conf # Generated by NetworkManager names ...

  2. cs项目服务器更新,Visual Studio下运行PowerShell脚本自动更新项目里AssemblyInfo.cs文件的版本(自增小版本号)并发布到Nuget服务器上...

    Visual Studio下运行PowerShell脚本自动更新项目里AssemblyInfo.cs文件的版本(自增小版本号)并发布到Nuget服务器上 附脚本[ update.ps1文件内容]: $ ...

  3. 项目中:Json文件的读取

    项目中:Json文件的读取 读Json文件 取Json文件中内容 举例: 举例:Json文件内容如下(Flickr8k) {'images':[{'sentids': [39300, 39301, 3 ...

  4. vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例

    下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...

  5. Json文件内容加密

    Json文件内容加密 RAS 1.配置公私钥 PUBLIC_KEY: MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9ikrLxa/cgLZXQugBQFhdxCPQm ...

  6. java读取json文件内容_java读取json文件内容详解

    之前给大家介绍了一下java读取txt文件内容,下面要给大家介绍的就是java读取json文件内容,一起来了解一下吧. 1.java读取json文件 下面是具体的思路: 首先是获取文件-获取文件内容- ...

  7. java读取json文件_Java 读取Json文件内容

    读取json文件为String类型: import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logge ...

  8. HarmonyOS(鸿蒙)App项目实战(1)运动手表篇学习笔记

    HarmonyOS(鸿蒙)APP项目实战(1)运动手表篇学习笔记 前言 概括 创建项目 创建主页面 创建index中的组件 设定index中组件的样式 为主页面添加应有的功能 创建倒计时页面 创建da ...

  9. ASP.NET Core分布式项目实战(运行Consent Page)--学习笔记

    任务21:运行Consent Page 修改 Config.cs 中的 RequireConsent 为 true,这样登录的时候就会跳转到 Consent 页面 修改 ConsentControll ...

最新文章

  1. 博士发表2篇以上高水平论文,可直聘为副教授或教授!
  2. vue单选,多选,多选的内容显示在页面可删除
  3. cordova sqlite
  4. python怎么修改while循环类型_python 的for与while 的i改变
  5. wxWidgets:wxTextWrapper类用法
  6. 分支限界法实现最优装载c++_分支限界法
  7. unity 删除服务器项目,在吗?有个支持批量构建项目的好东西推荐给你
  8. HDU 3094 树上删边 NIM变形
  9. 场景7:带有Linux网桥的提供商网络
  10. [加密]SSL/TLS原理详解
  11. 万年历打印Java_java实验之打印万年历
  12. pulse 去马赛克软件_去马赛克神器AI修图黑科技PULSE 有码变高清,AI一秒还原马赛克...
  13. 80后:结婚太难 ZZ
  14. 台式机开机黑屏一直闪小横杠,键盘灯鼠标均正常,主板亮
  15. 概率统计Python计算:学生分布分位点计算
  16. Flutter问题集
  17. 归并排序---------数构
  18. 计算机网络保研面试题整理(自用)
  19. CRM为3Com带来什么?
  20. 微信中最让你恶心的一项功能是什么

热门文章

  1. PAT 1065 A+B and C[大数运算][溢出]
  2. Infura Http 客户端 以太坊 交易
  3. OAuth2.0 授权的工作原理
  4. MariaDB10 主从配置
  5. hdu 2824 The Euler function
  6. 从零写一个编译器(十三):代码生成之遍历AST
  7. 基本包装类和System类
  8. 基于Nginx+FastDFS搭建图片文件系统
  9. 前端开发自学之JavaScript——显示当前时间
  10. JLOI2015 解题报告