angular - Angular AOT 和 JIT 编译器有什么区别

Question

我正在深入研究 Angular 4，我正在尝试理解编译。我读过 AOT 和 JIT 都将 TypeScript 编译为 JavaScript，无论是在服务器端还是在客户端。如果我在使用 Webpack 和 grunt 构建它并部署那个缩小的 javascript 时编译它，AOT 和 JIT 甚至如何进入画面？

Answer 1

I've read that AOT and JIT both compile TypeScript to JavaScript whether that is server side or on the client side.

不，这不是 AOT 和 JIT 编译器所做的。使用 TypeScript 编译器将 TypeScript 转换为 JavaScript。

Angular 编译器

有两个编译器负责编译和代码生成的繁重工作:

• view compiler
• provider compiler

View 编译器编译组件模板和generates view factories .它解析模板中的表达式和 html 元素，并经历许多标准编译器阶段:

parse-tree (lexer) -> abstract-syntax-tree (parser) -> intermediate-code-tree -> output

提供者编译器编译模块提供者和generates module factories .

JIT 与 AOT

这两个编译器在JIT和AOT编译中都会用到。 JIT 和 AOT 编译在获取与组件或模块关联的元数据的方式上有所不同:

// the view compiler needs this data

@Component({
   providers: ...
   template: ...
})

// the provider compiler needs this data

@NgModule({
   providers: ...
});

JIT 编译器使用运行时来获取数据。装饰器函数 @Component 和 @NgModule 被执行并且 they attach metadata到组件或模块类，稍后由 Angular 编译器使用反射功能(Reflect 库)读取。

AOT 编译器使用 typescript 编译器提供的静态代码分析来提取元数据，而不依赖于代码评估。因此，与 JIT 编译器相比，它有点受限，因为它无法评估非显式代码——例如，它需要导出一个函数:

// this module scoped function

function declarations() {
  return [
    SomeComponent
  ]
}

// should be exported

export function declarations() {
  return [
    SomeComponent
  ];
}
@NgModule({
  declarations: declarations(),
})
export class SomeModule {}

同样，JIT 和 AOT 编译器大多是用于提取与组件或模块关联的元数据的包装器，它们都使用底层 View 和提供程序编译器来生成工厂。

If I am compiling it when I build it with Webpack and grunt and deploying that minified javascript how does AOT and JIT even come into the picture?

Angular 提供 webpack plugin在构建期间从 typescript 执行转译。此插件还可以 AOT 编译您的项目，这样您就不会将 JIT 编译器包含到包中，也不会在客户端执行编译。