现在流行的前端框架，vue，angular或者是react它们的核心功能是数据绑定，如下代码。

<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>

当属性message的值改变的时候框架能够将新的值自动设置到dom元素中，完成数据更新绑定。为了实现这个功能，框架都采取了类似的做法。就是将模板里边的各种标签遍历，得到模板元素的树形结构，根据这个树形结构，创建一个代理的dom树（vue自称虚拟dom），然后代理dom调用document.createElement等创建浏览器dom对象，完成显示。所以你在用vue或者是angular的时候你写了div，不要以为你写的是html，实际上你写的是js，或者说你写了类似于html的字符串，框架会根据你写的html字符串，帮你生成创建真实dom的js代码，我把这个过程称为编译。有心的朋友就会想到把编译的过程在nodejs环境下执行，将编译后生成的js发送到浏览器直接执行，而不是将你写的html模板发送到浏览器，在浏览器上编译，这样浏览器就不需要下载解析html字符串的代码。vue和angular两种方式都有提供。就angular来说，一种叫jit，一种叫aot编译。本文就从angular源码的角度来简单分析下这个编译的过程。

我认为js或者是typescript的源代码不易阅读，因为里边有大量的回调和异步（java直男的心声）。有一种表好的方式就是在调试过程中阅读代码。将angular源代码从github下clone下来，然后再源代码目录写一个小demo，使用打包工具（webpack，rollup等）打包，最后生成一个js和一个js.map。是用chrome的时候会将代码原样显示在浏览器中，这样就打断点就行调试，了解angular的源码结构。

angular的编译方式，一种是在浏览器段的jit编译。一种是在node环境中的aot编译。其实这两种编译过程相差都是相差无几。先看jit。从angular的第一行代码开始。

@NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent]
})
class AppModule {}let platformRef = platformBrowserDynamic();
platformRef.bootstrapModule(AppModule);

首先angular获取的是PlatformRef对象，然后调用bootstrapModule方法。在这里边先是异步的编译，再是执行编译后的代码。这里主要讨论的是编译过程，执行过程本文不予讨论。

const compiler = compilerFactory.createCompiler([options]);return compiler.compileModuleAsync(moduleType).then((moduleFactory) => this.bootstrapModuleFactory(moduleFactory, options));

这里获取到是CompilerImpl对象，CompilerImpl是JitCompiler的代理类。调用了JitCompiler._compileModuleAndComponents方法。

private _compileModuleAndComponents(moduleType: Type, isSync: boolean): SyncAsync<object> {return SyncAsync.then(this._loadModules(moduleType, isSync), () => {this._compileComponents(moduleType, null);return this._compileModule(moduleType);});}

这个方法主要有3个过程：1.loadmodules的主要功能是从appModule开始根据配置去加载自身和被引入的所有模块的组件，指令，管道，服务等，并且计算所有依赖关系，另外加载component的时候调用了htmlParser进行模板html的遍历和解析，得到了html的结构，存储在ParseTreeResult对象中，此时已经知道了每个component的html层次结构。解析过程是通过判断<></>标记得到的，这里不做赘述请参见：compiler/ml_parser/parser.ts。2._compileComponents编译组件。3.编译模块。此处重点是_compileComponents方法，和_compileModule方法。先看_compileComponents

 _compileComponents(mainModule: Type, allComponentFactories: object[]|null) {const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;const moduleByJitDirective = new Map<any, CompileNgModuleMetadata>();const templates = new Set<CompiledTemplate>();const transJitModules = this._filterJitIdentifiers(ngModule.transitiveModule.modules);transJitModules.forEach((localMod) => {const localModuleMeta = this._metadataResolver.getNgModuleMetadata(localMod) !;this._filterJitIdentifiers(localModuleMeta.declaredDirectives).forEach((dirRef) => {moduleByJitDirective.set(dirRef, localModuleMeta);const dirMeta = this._metadataResolver.getDirectiveMetadata(dirRef);if (dirMeta.isComponent) {templates.add(this._createCompiledTemplate(dirMeta, localModuleMeta));if (allComponentFactories) {const template =this._createCompiledHostTemplate(dirMeta.type.reference, localModuleMeta);templates.add(template);allComponentFactories.push(dirMeta.componentFactory as object);}}});});transJitModules.forEach((localMod) => {const localModuleMeta = this._metadataResolver.getNgModuleMetadata(localMod) !;this._filterJitIdentifiers(localModuleMeta.declaredDirectives).forEach((dirRef) => {const dirMeta = this._metadataResolver.getDirectiveMetadata(dirRef);if (dirMeta.isComponent) {dirMeta.entryComponents.forEach((entryComponentType) => {const moduleMeta = moduleByJitDirective.get(entryComponentType.componentType) !;templates.add(this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));});}});localModuleMeta.entryComponents.forEach((entryComponentType) => {if (!this.hasAotSummary(entryComponentType.componentType.reference)) {const moduleMeta = moduleByJitDirective.get(entryComponentType.componentType) !;templates.add(this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));}});});templates.forEach((template) => this._compileTemplate(template));}

这个方法主要是获取本身和被imports模块的或有组件注解，添加到templates中。当然方法的代码比较多，主要使用CompiledTemplate这个类来保持组件和模块直接的映射关系。然后逐个组件调用_compileTemplate编译模板。_compileTemplate函数是angular的核心和心脏，下面重点来分析。

private _compileTemplate(template: CompiledTemplate) {if (template.isCompiled) {return;}const compMeta = template.compMeta;const externalStylesheetsByModuleUrl = new Map<string, CompiledStylesheet>();const outputContext = createOutputContext();const componentStylesheet = this._styleCompiler.compileComponent(outputContext, compMeta);compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {const compiledStylesheet =this._styleCompiler.compileStyles(createOutputContext(), compMeta, stylesheetMeta);externalStylesheetsByModuleUrl.set(stylesheetMeta.moduleUrl !, compiledStylesheet);});this._resolveStylesCompileResult(componentStylesheet, externalStylesheetsByModuleUrl);const pipes = template.ngModule.transitiveModule.pipes.map(pipe => this._metadataResolver.getPipeSummary(pipe.reference));const _parsedTemplateResult =this._parseTemplate(compMeta, template.ngModule, template.directives);const parsedTemplate= _parsedTemplateResult.template;const usedPipes =_parsedTemplateResult.pipes;const compileResult = this._viewCompiler.compileComponent(outputContext, compMeta, parsedTemplate, ir.variable(componentStylesheet.stylesVar),usedPipes);const evalResult = this._interpretOrJit(templateJitUrl(template.ngModule.type, template.compMeta), outputContext.statements);const viewClass = evalResult[compileResult.viewClassVar];const rendererType = evalResult[compileResult.rendererTypeVar];template.compiled(viewClass, rendererType);}

这个方法的主要逻辑有4个，首先是调用styleCompiler编译组件的样式，其次是调用templateParser去解析html结构，得到模板和组件的调用关系，用了什么组件，有什么输出，然后调用viewCompiler进行视图解析，得到express的层级结构（也就是前面说的，angular根据你写的html模板会生成创建dom的js），最后通过_interpretOrJit生成js代码。

1.样式编译：

首先调用styleCompiler.compileComponent方法。在其中内部调用了compileStyle方法

private _compileStyles(outputCtx: OutputContext, comp: CompileDirectiveMetadata,stylesheet: CompileStylesheetMetadata, shim: boolean,isComponentStylesheet: boolean): CompiledStylesheet {const styleExpressions: o.Expression[] =stylesheet.styles.map(plainStyle => o.literal(this._shimIfNeeded(plainStyle, shim)));const dependencies: StylesCompileDependency[] = [];stylesheet.styleUrls.forEach((styleUrl) => {const exprIndex = styleExpressions.length;// Note: This placeholder will be filled later.styleExpressions.push(null !);dependencies.push(new StylesCompileDependency(getStylesVarName(null), styleUrl,(value) => styleExpressions[exprIndex] = outputCtx.importExpr(value)));});// styles variable contains plain strings and arrays of other styles arrays (recursive),// so we set its type to dynamic.const stylesVar = getStylesVarName(isComponentStylesheet ? comp : null);const stmt = o.variable(stylesVar).set(o.literalArr(styleExpressions, new o.ArrayType(o.DYNAMIC_TYPE, [o.TypeModifier.Const]))).toDeclStmt(null, isComponentStylesheet ? [o.StmtModifier.Final] : [o.StmtModifier.Final, o.StmtModifier.Exported]);outputCtx.statements.push(stmt);return new CompiledStylesheet(outputCtx, stylesVar, dependencies, shim, stylesheet);}

这个方法主要是为css的各个选择器加上了_nghost-%COMP%属性后缀，比如，h1{}会变成h1[_ngcontent-%COMP%]{}，当然这是根据配置项encapsulation决定的，然后创建了一些Expression对象，Expression是对编程语言表达式的封装，前面说过，编译的目的是生成js代码，但是angular并没有直接生成js代码字符串，而是用express对象来表达代码的语句结构。这里我用typescript来说明express表达式的结构大致如下: const styles_componentName : any[] = ["h1[_ngcontent-%COMP%]{}"];其中数组的长度取决于组件style的个数。至此样式编译基本结束。

2.模板解析

样式编译之后angular执行模板解析。模板解析调用了templateParser.parse方法，内部再调用了tryParse方法，

tryParse(component: CompileDirectiveMetadata, template: string|ParseTreeResult,directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[], schemas: SchemaMetadata[],templateUrl: string, preserveWhitespaces: boolean): TemplateParseResult {let htmlParseResult = typeof template === 'string' ?this._htmlParser !.parse(template, templateUrl, true, this.getInterpolationConfig(component)) :template;if (!preserveWhitespaces) {htmlParseResult = removeWhitespaces(htmlParseResult);}

这里templateParser虽然持有htmlParser对象，但此处并没有做html模板的遍历，因为在之前loadModules的过程中对每个组件进行了预解析，解析的过程在哪里已经完成了，这里得到ParseTreeResult对象，这里做的事情是preserveWhitespaces配置项，清除内部的空格，然后根据相应的元素，属性的名称和值，得到模板调用了哪些组件，指令等。如属性*ngIf在这里被解析到是对ngIF指令的调用。结果存储到TemplateParseResult对象中

3.使用viewCompiler进行视图解析。

JitCompiler调用了viewCompiler.compilerComponent方法，这个方法代码如下：

compileComponent(outputCtx: OutputContext, component: CompileDirectiveMetadata, template: TemplateAst[],styles: o.Expression, usedPipes: CompilePipeSummary[]): ViewCompileResult {let embeddedViewCount = 0;const staticQueryIds = findStaticQueryIds(template);let renderComponentVarName: string = undefined !;if (!component.isHost) {const template = component.template !;const customRenderData: o.LiteralMapEntry[] = [];if (template.animations && template.animations.length) {customRenderData.push(new o.LiteralMapEntry('animation', convertValueToOutputAst(outputCtx, template.animations), true));}const renderComponentVar = o.variable(rendererTypeName(component.type.reference));renderComponentVarName = renderComponentVar.name !;outputCtx.statements.push(renderComponentVar.set(o.importExpr(Identifiers.createRendererType2).callFn([new o.LiteralMapExpr([new o.LiteralMapEntry('encapsulation', o.literal(template.encapsulation), false),new o.LiteralMapEntry('styles', styles, false),new o.LiteralMapEntry('data', new o.LiteralMapExpr(customRenderData), false)])])).toDeclStmt(o.importType(Identifiers.RendererType2),[o.StmtModifier.Final, o.StmtModifier.Exported]));}const viewBuilderFactory = (parent: ViewBuilder | null): ViewBuilder => {const embeddedViewIndex = embeddedViewCount++;return new ViewBuilder(this._reflector, outputCtx, parent, component, embeddedViewIndex, usedPipes,staticQueryIds, viewBuilderFactory);};const visitor = viewBuilderFactory(null);visitor.visitAll([], template);outputCtx.statements.push(...visitor.build());return new ViewCompileResult(visitor.viewName, renderComponentVarName);}

在这个方法中，同styleCompiler一样，首先是创建了代码表达式对象express，代码结构大致如下，其中data:customrenderData是对动画的处理和调用。

import render2 from @angular/core;

export const RenderType_componentName = render2 ({encapsulation:1,styles:styles, data:customrenderData}) 

然后创建ViewBuilder对象，viewBuilder采用了访问者模式，遍历上文创建的TemplateParseResult对象，生成创建html的express对象。viewBuilder生成的express，严格根据html的层次结构来的。比如<div *ngFor="let o of items">{{o}}</div>,生层express表达式对象大致如下:其中使用了ng-template会创建多个function。jit_textDef_3等是对core/view/view.ts中函数调用。

function View_CompnentName_0(_l) {return jit_viewDef_1(0,[(_l()(),jit_textDef_3(-1,null,['\n    '])),(_l()(),jit_anchorDef_4(16777216,null,null,1,null,View_CompnentName_1)),jit_directiveDef_5(2,802816,null,0,jit_NgForOf_6,[jit_ViewContainerRef_7,jit_TemplateRef_8,jit_IterableDiffers_9],{ngForOf:[0,'ngForOf']},null),(_l()(),jit_textDef_3(-1,null,['\n  ']))],function(_ck,_v) {var _co = _v.component;var currVal_0 = _co.items;_ck(_v,2,0,currVal_0);},null);
}

4.express到js。

前面3个步骤分别得到了styles和模板的express结构，但此时还没有产生js代码，将这些express通过_interpretOrJit得到js的代码字符串，并通过newFunction的形式形成真正的函数。到此，组件编译过程结束。

将component编译完毕之后，angular会编译module。

module的编译过程比较简单，代码如下

private _compileModule(moduleType: Type): object {let ngModuleFactory = this._compiledNgModuleCache.get(moduleType) !;if (!ngModuleFactory) {const moduleMeta = this._metadataResolver.getNgModuleMetadata(moduleType) !;// Always provide a bound Compilerconst extraProviders = this.getExtraNgModuleProviders(moduleMeta.type.reference);const outputCtx = createOutputContext();const compileResult = this._ngModuleCompiler.compile(outputCtx, moduleMeta, extraProviders);ngModuleFactory = this._interpretOrJit(ngModuleJitUrl(moduleMeta), outputCtx.statements)[compileResult.ngModuleFactoryVar];this._compiledNgModuleCache.set(moduleMeta.type.reference, ngModuleFactory);}return ngModuleFactory;}

解析模块用到的各个provider，类似于component，先创建express，然后调用interpretOrJit得到js代码。其中生成的代码是对core/view/ng_module.ts的调用

到此angular的编译过程结束。

在使用aot编译的时候过程基本一致，只是产生的js代码会写到本地文件中，包括依赖注入的解析，也会写成js文件。