这篇文章从宏观的角度认识Angular 的工程(project),构建对象(build target),编译器(compiler)。包括如下内容
一般而言,Angular的工作目录结构如下:
my-app |---- tsconfig.json angular.json package.json projects |----- project1 project2 src |----- xxxx
特指angular.json文件。下面看看这个工程文件的主要几个部分。先列出其中使用的github 链接。
$schema
字段指定的值。用来描述Angular 工作空间的多项目的结构。其实就是当前angular.json 的约束。简单样例如下。
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",//schema "version": 1, // 你的程序的版本 "newProjectRoot": "projects", // 表示如果使用ng new 创建一个新的project,它的根目录在projects下面,可以任意指定 "projects":{ "project1":{}, // 第一个project "project2":{} // 第二个project }, "defaultProject":"project1", // 默认是那个project "schematics":{}, // configSchema, 链接如上,控制组件风格的。 "cli":{"analytics": false} // 这个可以忽略,例如这个选项就是决定是否跟Angular Team 分析你项目的使用分析。 }
还是看下面的这个简单的例子,下面的配置是上面配置中project1的值。 先列出其中用到的一些链接
{ "root":"xxx", // 表示这个project 的根目录。 "sourcrRoot":"xxx/xxx", // 这个表示这个project 的src 的目录。注意跟上面的区分, src 里面放置了main.ts app.module 等。 "projectType":"application",// 项目的类型,application library 等。 "prefix":"",// 组件selector 的前缀。 "schematics":{}, // 与上一节中的configSchema 一样。控制组件风格的。 "architect":{}, // 这个是核心,会定义这个工程有哪些编译模式。下节细谈. }
architect里面定义了各种各样的构建对象(build target),那么什么是build target 呢?最直接的认识,ng build
,ng serve
,这两个命令里面的build,serve就是构建对象。我们可以把它们理解成环境变量+构建工具的组合。
首先,Angular 保留了这些构建对象
{ "architect": { "build": {}, "serve": {}, "e2e" : {}, "test": {}, "lint": {}, "extract-i18n": {}, "server": {}, "app-shell": {}, "mybuildTarget":{}, // 这个是自定义的构建对象,任意名字。 } }
我们也可以自己定义任意名字的构建对象,然后我们可以在package.json 中这么使用它 ng run mybuildTarget
(这个我没有实验过),不过大部分情况下,我们只会用保留build Target。那么每一个build Target 拥有三个重要的字段 builder,options,configurations
builder 这个里面是清单,给两个例子
options 描述与对象的project 工程相关的属性,例如下面的例子
{ "options":{// 配置选项 "outputPath":'dist/xxx', "index":'xxx/src/index.html', "main":"xxx/src/main.ts", "polyfills":'xxx/src/polyfill.ts', "tsConfig":'xxx/src/tsconfig.app.json', "assets":[assetPath1,assetPath2,...], // {"glob":xxx,"input":xxx,"output":xxx},需要复制到dist目录的assets "styles":[stylePath1,stylePath2,...],// {"glob":xxx,"input":xxx,"output":xxx},需要添加到index.html的样式文件, "scripts":[script1,script2,xxx],// 需要添加到index.html的js 文件。 } }
{ "configurations":{ // 典型的用法是 `ng build -c=production/development/qa/uat` "production":{}, // 生成环境的编译配置 "development":{}, // 本地开发环境的配置 "qa":{}, // 测试环境的配置 "uat":{}, // uat测试环境的配置 "demo":{ "fileReplacements":[ {"replace":'xxx/environment.ts','with':'xxx/environment.prod.ts'} // 编译前替换文件 ], //options 里面大部分的配置,这个地方都可以替换。 } } }
ng run buildTarget -c=configurationName
或者99%的使用场景是ng build -c=configurationName
使用configurationName来编译build 编译对象,也就是编译应用。ng serve -c=configurationName
使用configurationName来编译serve 编译对象,也就是本地开发环境。Create Programe(TS) ---> Analysis(Angular) ---> Resolve(Angular) ---> Type Checking(TS) ---> Emit (TS)
TS: TSC中的步骤
首先使用这个模式的好处与原因
Angular 提供了两者编译器 JIT(Just In Time) vs AOT(Ahead Of Time)
JIT: 在浏览器中的runtime中编译你的应用。Angular8 之前默认的编译器, 也叫ViewEngine
AOT: 在编译打包阶段编译应用, Angular9 开始的默认编译器,也叫IVY。
Angular.json中的aot:true
可以控制编译器的选择。
AOT 友好的代码
code Analysis (AOT collector)
code generation/Resolve
Template type checking
它是通过typescript 来实现模板里面的语法类型检测的。