介绍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} 这个构建对象代表编译共享库

• ng-package.json 这个是字段描述

• 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 文件。
      "browserTarget":"your-project-name:build:environment(production,QA)",// 引用你的另一个项目中build中的environment的options。
    }
}

• 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 projectName:buildTarget -c=configurationName或者99%的使用场景是
• ng build -c=configurationName 使用configurationName来编译build 编译对象，也就是编译应用。
• ng serve -c=configurationName 使用configurationName来编译serve 编译对象，也就是本地开发环境。