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 😊💻