标签：xxx angular 编译 编译器 build 工程化 Angular

介绍Angular 工程化，构建对象，编译器

这篇文章从宏观的角度认识Angular 的工程(project)，构建对象(build target)，编译器(compiler)。包括如下内容

• 工程文件的主要构成
• 构建对象的配置
• 编译器的步骤与职责

Angular的工程(project)

一般而言，Angular的工作目录结构如下：

my-app
|----
     tsconfig.json
     angular.json
     package.json
     projects
     |-----
           project1
           project2
     src
     |-----
           xxxx
     

特指angular.json文件。下面看看这个工程文件的主要几个部分。先列出其中使用的github 链接。

• 工程文件Schema 也就是$schema字段指定的值。用来描述Angular 工作空间的多项目的结构。其实就是当前angular.json 的约束。
• configSchema这个Schema就是控制当我们工程里面的组件的风格，样式的类型scss/css 等，同时也会控制ng new 自动产生的组件的风格。

简单样例如下。

{
  "$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 分析你项目的使用分析。
}

我们再次深入看看某个project 的配置信息。

还是看下面的这个简单的例子,下面的配置是上面配置中project1的值。 先列出其中用到的一些链接

• 这个JSON的schema,注意:不同的项目类型(projectType)，(例如：application, library等),参考github里面不同的文件夹内的schema文件。

{
  "root":"xxx",  // 表示这个project 的根目录。
  "sourcrRoot":"xxx/xxx", // 这个表示这个project 的src 的目录。注意跟上面的区分， src 里面放置了main.ts app.module 等。
  "projectType":"application",// 项目的类型，application  library 等。
  "prefix":"",// 组件selector 的前缀。
  "schematics":{}, // 与上一节中的configSchema 一样。控制组件风格的。
  "architect":{},  // 这个是核心，会定义这个工程有哪些编译模式。下节细谈.
}

再来看看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 这个里面是清单，给两个例子

  • {"builder":"@angular-devkit/build-angular:browser"} 这个构建对象代表编译生产库的网页应用
  • {"builder":@angular-devkit/build-angular:dev-server} 这个构建对象代表本地开发的网页应用
  • {builder:@angular-devkit/build-angular:ng-packagr} 这个构建对象代表编译共享库

• 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 则表示这个构建对象有哪些环境配置选项，例如Dev, Production, UAT, QA 等，它的内容与options类似，用于复写options 的内容。给个例子

{
  "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 编译对象，也就是本地开发环境。

---

编译IVY

Angular 编译器模型与步骤

Create Programe(TS) ---> Analysis(Angular) ---> Resolve(Angular) ---> Type Checking(TS) ---> Emit (TS)
TS: TSC中的步骤

• Create Programe, 从tsconfig.json 出发 递归解析文件，import modules,除了ts本身的，angular 一些文件导入,ngFactoryResolve 等。
• Analysis 递归查找文件树中的所有类，找到Angular相关的类，组件等。并且以类为单元，尝试做一些独立的解析。不会去做类之间操作的事情，这一步可以理解为对类做一些元数据的解析生成。Isolate,这些类的解析完成后，下一步会利用他们做成软件结构的解析。
• Resolve 这个阶段是从一个组件树的角度去理解依赖关系，做一些优化的策略
• Type Checking 这一步会去检查有没有类型错误，以及Component 表达式中有没有类型错误。
• Emit 这一步是最昂贵的一步，将typescript 转换成js. 产生Angular Component 类的产生js 代码。

编译器的模型(Model)与功能(Feature)

功能(Feature)

• NgModule Scopes, Scope 中声明template 中组件查找的作用域 (decleration, exports)
• Partial evaluation, import 中的内容可以是原生的Array, funtion等，对于一些其他的例如使用到document.body.scrollwitdh 的属性，可以在编译的时候跳过，等等
• Template type-checking, 解析模板中的类型。

AOT(Ahead-Of-Time Compiler)

首先使用这个模式的好处与原因

• 快速的渲染加载，由于Angular的框架代码已经是编译好摇树过的js,浏览器中直接执行，无需再编译
• 更少的异步请求，IVY编译器通过inline的方式，集成了html template + css，减少了请求数量
• 更小的框架包体积，IVY在编译阶段摇树的方式去除了不用的代码
• 更早的检测到模板中的错误
• 更好的安全性

Angular 提供了两者编译器 JIT(Just In Time) vs AOT(Ahead Of Time)

• JIT: 在浏览器中的runtime中编译你的应用。Angular8 之前默认的编译器， 也叫ViewEngine

• AOT: 在编译打包阶段编译应用， Angular9 开始的默认编译器，也叫IVY。
  Angular.json中的aot:true可以控制编译器的选择。

• AOT 友好的代码

  • factoryfunction 必须是一个有名方法，不能是一个匿名的或者箭头函数
  • 模板中的变量不能是私有变量
  • 模板中的函数调用的前面必须要匹配

• code Analysis (AOT collector)

  • AOT collector所认识的是js的一个子集. 也就是说在decorator（例如：@Component, @NgModule等） 中所以写的表达式就是js的一个子集。
  • 这个子集Expression syntax limitations
  • 不能使用箭头函数，必须使用exporeted named function.
  • 代码折叠(Code Folding),编译器引用exported symbols. 然而collector 可以执行部分表达式，将结果记录到meta.json中。这个过程叫做fold,也就是代码折叠。

• code generation/Resolve

  • 编译器只能支持某些类的创建，支持核心的decorator,支持返回表达式的宏函数(静态函数或者函数)的调用
  • Metadata rewriting, 对于provider 里面的语义对象，编译器有特殊的逻辑，能够使用箭头函数，没有导出的对象，只能是某些特殊写法。

• Template type checking
  它是通过typescript 来实现模板里面的语法类型检测的。

标签：xxx,angular,编译,编译器,build,工程化,Angular
来源： https://www.cnblogs.com/kongshu-612/p/16167291.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。