今天一早準備工作時,看到令人興奮的好消息!那就是 ─ Angular v12 已經正式 Release 了!!
官方文章在此:Angular v12 is now available
幫看到英文就倒退三百步的朋友總結一下幾個重點:
Ivy Everywhere
為了更靠近 Ivy Everywhere 這個目標, Angular 棄用了舊的 Compiler - View Engine ,不過這對於一般開發者來說沒什麼影響,主要是如果你是身為 Library 的作者且是使用 View Engine 來 Compile 的話,可以開始著手準備使用 Ivy 來 Compile 了。
為此,官方有提供實作細節。
Protractor 的未來
關於 Angular 生態圈所標配的 E2E 測試框架 ─ Protractor 的未來,目前官方決定將從 v12 開始不再預設包含 Protractor ,而是與其他夥伴合作(目前官方已收到的夥伴回音有 Cypress 、 TestCafe 與 WebdriverIO 。如果你們公司也有在做這塊且有興趣,可以跟官方團隊聯繫),並透過 Angular CLI 的 schematic/builder 與 Angular 緊密結合。
官方堅信,透過與其他夥伴的合作以及擁抱社群的力量,可以使 Angular 變得更加強大!對於細節有興趣的朋友可以閱讀官方的RFC(請求意見稿)。
Nullish 操作符
從 v12 開始,開發者們可以在 Angular 的 Template 裡使用 Nullish 操作符 ─ ??
(沒錯,就是很香很甜的語法糖)了!
透過使用 Nullish 操作符,可以讓你的 code 看起來更加 Clean (雖然每個人、每個團隊對於 Clean Code 的定義都不一樣,但官方是這麼認為,我也是)。
舉個例子:
1 | {{ age !== null && age !== undefined ? age : calculateAge() }} |
使用 Nullish 操作符後,你的 code 像這樣:
1 | {{ age ?? calculateAge() }} |
謎之聲:耶!令人舒爽的程式碼!
樣式相關的改進
關於樣式方面,從 v12 開始,只要在 angular.json
裡加上 inlineStyleLanguage: "scss"
的設定,就可以在 Component 的 styles
裡寫 SCSS 了,雖然關於這點我其實覺得還好,因為我個人不喜歡將 Template 或是樣式直接寫在 *.component.ts
裡。
不過令人興奮的是, Angular CDK 與 Angular Material 現在內部已經改使用 Sass 新的 Module System 了!與此同時, Angular CDK 與 Angular Material 所外露的 API 介面也已經改採用 @use
語法,官方文件 也已經同步更新(尷尬,破版了XDD)。
不過如果你的應用程式是建立在 Angular v12 以下,但有使用到新版的 Angular CDK 或是 Angular Material 的話,可以使用 ng update
的指令讓 Angular CLI 幫你自動更新所有使用於 Angular CDK 與 Angular Material 的 @import
聲明(Before and After),並記得將你的 NPM 套件從 node-sass
改為 sass
, node-sass
已經沒有持續更新且維護了(如果你是使用 Angular v12 則不用做此行為,內建已經是 sass
了)。
編譯模式預設為 Production 模式
v12 之後, ng build
指令將會預設為 Production 模式,意即開發者們不用再加上 --prod
來強調要編譯 Production 模式的檔案,減少多餘的步驟並防止將開發模式的程式碼誤植到 Production 上的意外發生。
預設開啟嚴格模式
v12 之後,將預設開啟 TypeScript 的嚴格模式,嚴格模式會幫助開發者們儘早發現錯誤。
關於嚴格模式可以閱讀 Angular 官方文件與 Angular 官方部落格的文章。
Angular Language Service 預設為 Ivy-based
v12 之後,將原先 Angular Language Service 可以選擇性使用 Ivy-based 改為預設使用。
官方還有提供了一部影片 是關於Angular Language Service with Ivy 的,有興趣的朋友也可以看看。
使用 Webpack 5
從 v11 開始, Angular 其實就有實驗性地在支援 Webpack 5 ;但從 v12 開始,就正式支援啦!!!(灑花)
TypeScript v4.2
v12 預設所採用的 TypeScript 是 v4.2 ,關於 v4.2 的細節可以閱讀官方的文章。
棄用對 IE 11 的支援
從 v12 開始,官方將棄用對於 IE 11 的支援,並預計將在 v13 時正式將其移除。關於此決定可以觀看 官方的 RFC(請求意見稿)。
其他更新
其實其他還有一些滿重要的更新與調整,不過上述幾點是我個人擷取出來,覺得對一般開發者來說比較重要且有感的更新,所以關於其他的更新,可以直接閱讀官方的文章,抑或是直接看官方的 CHANGELOG。
以上,就是今天李歐想要分享給大家的資訊,感謝您的收看!
如果您喜歡我的文章,歡迎按讚、訂閱以及分享,我們下次見囉,拜拜~!(好 Youtuber 式的結尾XD)