Angular 18+ 高级教程 – Angular Compiler (AKA ngc) Quick View

前言

Get Started 那一篇,我们提到过 Angular Compilation。这篇稍微给点具体画面,让大家感受一下。

但不会讲细节,对细节感兴趣的可以看这篇 Medium – How the Angular Compiler Works

 

Run ngc manually

ng new test --skip-tests -s -t
yarn install

创建好项目后, 运行 command

npm run ngc -p tsconfig.json

 or yarn run

yarn run ngc -p tsconfig.json

 

Folder & File

这时 Angular 会创建出 dist folder

里面就是 compile 好了的 .js file。Angular 会把 .ts、.html、.scss compile 成 .js。

打开 app.component.js 长这样

HTML 变成了一堆 JS 函数,从名字可以看出它们类似 document.createElement。

CSS 也变成了单纯的 string。

 

总结

Angular Compile 的主要作用是提升 DX (Developer Experience),类似 Scss 和 TS。

它会把 Decorator、Scss、TS、HTML 变成 JS,把 "声明式代码" 变成 "执行代码"。

 

 

目录

上一篇 Angular 18+ 高级教程 – Getting Started

下一篇 Angular 18+ 高级教程 – Dependency Injection 依赖注入

想查看目录,请移步 Angular 18+ 高级教程 – 目录

喜欢请点推荐👍,若发现教程内容以新版脱节请评论通知我。happy coding 😊💻

 

posted @ 2023-04-13 20:53  兴杰  阅读(762)  评论(0编辑  收藏  举报