“Ivy” 是 Angular v6 的新一代渲染器。从 v6.0.0-beta.1 开始，Ivy 已经作为体验 API 发布。
作为下一代的 Angular 的视图引擎，重点在于彻底缩减代码尺寸并增强灵活性。在中，你可以看到，对于一个 Hello, world 应用，代码的尺寸可以缩减到 3K 左右。
创建项目
使用 ng new --minimal 创建一个最小化项目。
ng new ngv6-ivy --minimal
更新 Angular 到 v6
将所有的 Angular 包更新到 v6. 当前的 package.json 内容。 当前版本是 v6.0.0 beta.3.
{ "name": "ngv6-ivy", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "6.0.0-beta.3", "@angular/common": "6.0.0-beta.3", "@angular/compiler": "6.0.0-beta.3", "@angular/core": "6.0.0-beta.3", "@angular/forms": "6.0.0-beta.3", "@angular/http": "6.0.0-beta.3", "@angular/platform-browser": "6.0.0-beta.3", "@angular/platform-browser-dynamic": "6.0.0-beta.3", "@angular/router": "6.0.0-beta.3", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "1.6.8", "@angular/compiler-cli": "6.0.0-beta.3", "@angular/language-service": "6.0.0-beta.3", "typescript": "~2.5.3" }}
使用 ng version 检查当前项目
_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/Angular CLI: 1.6.8Node: 8.9.3OS: win32 x64Angular: 6.0.0-beta.3... animations, common, compiler, compiler-cli, core, forms... http, language-service, platform-browser... platform-browser-dynamic, router@angular/cli: 1.6.8@angular-devkit/build-optimizer: 0.0.42@angular-devkit/core: 0.0.29@angular-devkit/schematics: 0.0.52@ngtools/json-schema: 1.1.0@ngtools/webpack: 1.9.8@schematics/angular: 0.1.17typescript: 2.5.3webpack: 3.10.0
启用 Ivy
1. 在 src/tsconfig.app.json 中添加 enableIvy , See
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "angularCompilerOptions": { "enableIvy": true }}
2. 从 AppModule 中删除 BrowserModule
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
3. 简化 AppComponent
import { Component } from '@angular/core';@Component({ selector: 'app-root', template: 'Hello { {greeting}}!',})export class AppComponent { greeting = 'World';}
4. 添加 ngc 命令到 package.json
{ "name": "ngv6-ivy", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "ngc": "ngc -p src/tsconfig.app.json" }
5. 在 src/tsconfig.json 中将 target 设置为 es2016：
"target": "es2016",
运行 ngc
npm run ngc -p src/tsconfig.app.json
查看输出结果
输出结果在 tsc-out 目录中。
检查 Ivy: ngComponentDef
打开 tsc-out/app/src/app/app.component.js
import { Component } from '@angular/core';import * as i0 from '@angular/core';export class AppComponent { constructor() { this.greeting = 'World'; }}AppComponent.decorators = [ { type: Component, args: [ { selector: 'app-root', template: 'Hello { {greeting}}!' } ] }];/** @nocollapse */AppComponent.ctorParameters = () => [];AppComponent.ngComponentDef = i0.ɵdefineComponent({ tag: 'app-root', factory: function AppComponent_Factory() { return new AppComponent(); }, template: function AppComponent_Template(ctx, cm) { if (cm) { i0.ɵT(0); } i0.ɵt(0, i0.ɵb1('Hello ', ctx.greeting, '!')); }});//# sourceMappingURL=app.component.js.map
注意 AppComponent.ngComponentDef，它使用 Ivy API 定义。
template 函数是从组件的 HTML 模板生成。
当 Ivy 稳定之后，我们将可以在组件中编写这些定义。然后，当前的 HTML 模板将会是可选的。我们可以选择无装饰的组件，它使用纯的 JavaScript 编写。
你可以在 GitHub 下载到完整的项目内容：
相关资料