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

Question

我正在潜入angular 4，我试图理解编译。我已经读到，AOT和JIT都将TypeScript编译为JavaScript，无论是在服务器端还是在客户端。如果我在用Webpack和grunt构建它时编译它，并部署简化的javascript，那么AOT和JIT又是如何出现的呢？

Answer 1

我已经读到，AOT和JIT都将TypeScript编译为JavaScript，无论是在服务器端还是在客户端。

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

有两个编译器完成编译和代码生成的艰苦工作：

null

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

// the view compiler needs this data

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

// the provider compiler needs this data

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

JIT编译器使用运行时获取数据。decorator函数@component和@ngmodule被执行，它们将元数据附加到组件或模块类，然后由Angular编译器使用reflective capabiliteis（Reflection library）读取这些组件或模块类。

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编译器大多是包装器，用于提取与组件或模块相关联的元数据，它们都使用底层视图和提供程序编译器来生成工厂。

Angular提供了webpack插件，该插件在构建期间从typescript执行transpilation。这个插件还可以AOT编译您的项目，这样您就不会在包中包含JIT编译器，也不会在客户机上执行编译。