要學打人,先學挨打。
這句話是指剛學武的人在學習怎麼要打人之前,要先學會挨打。知道被打是怎麼一回事之後,自然而然就知道要怎麼打人。當然,這句話其實還有其他方面的涵義,像是挨打其實可以增加自己的抗打能力、挨打的時候可以學習該怎麼防禦等等。但筆者想借鏡的是,在開始學習怎麼寫 Schematics 之前,先來看看 Schematics 的實際應用,知道實際應用的場景之後,才能夠寫出更好用的 Schematics 。
首先是絕大部分的讀者一定都知道的 ng new
。每當需要建立一個新的 Angular 專案的時候,通常會輸入以下指令來建立專案:
ng new [name] [option]
輸入完成之後, Angular CLI 就會幫你建立完所有應該要有的檔案,並且還幫你安裝好所有相依的套件,而我們只需再輸入 ng serve
指令,就可以看到專案的初始畫面:
是不是超棒超貼心的?!想想看,如果未來當你只需要輸入一行指令就能夠建立一個種子專案,並安裝好所有的套件,那能節省多少時間阿?!
上圖的專案初始畫面需將 Angular CLI 更新到
v8.3.0
之後,再使用ng new
建立專案。
接著是大多數讀者也可能有用過的 ng add
,這個是 Angular 6 之後才新增的指令,通常用來新增某個 Library 或 Package 到你的專案裡,幫你省下花費在設定上的時間。
例如:
ng add @angular/pwa
讓專案轉變成 PWA 的架構。ng add @angular/material
將 Angular Components 加入到專案之中。ng add @ng-bootstrap/schematics
將 ng-bootstrap 加入到專案之中ng add @clr/angular
將 Clarity Design System 加入到專案之中ng add ng-zorro-antd
將 NG-ZORRO 加入到專案之中其他還有非常多可以使用
ng add
的 Schematics,如:族繁不及備載,有興趣的讀者可以自行研究看看。
相較於 ng add
的一次性, ng generate
的使用次數較多,能省下的時間也就較為可觀。但除了我們平常會使用 Angular CLI 原本就有的 Schematics 來產生我們所需的元件之外,還有其他的 Schematics 可以使用嗎?
當然有,例如 Angular Components 在 Angular 6 之後,就提供了以下幾個 Schematics 給開發者們使用:
想要使用的讀者,詳細請參閱 Angular Components 的官方文件。
除了 Angular Components 外, NG-ZORRO 從 1.8.1 之後也有提供 Schematics 給開發者們使用,詳細請參閱 NG-ZORRO 的官方文件。
其他 Generator 類的 Schematics:
除了上述情境外,有時當我們在使用 Library 如果遇到版本升級時,也會需要花費不少時間在調整相對應的程式碼。但如果只要下一行指令就可以幫你把所有需要調整的地方通通都調整完的話呢?
ng update
就是在做這件事情!只要下了這行指令, Schematics 就能讓你輕輕鬆鬆省下花費在調整這些程式碼的時間,甚至還能幫你一併更新所有依賴的 Library 。
或許很多讀者會覺得,一個專案是能改幾次版?使用頻率有限吧?!
但你想想,如果今天有兩個 Library 讓你選擇,在其他條件都差不多的狀況下,你是會選有針對 ng update
實作相對應的處理的 Library 呢?還是沒有實作的呢?
如果是筆者的話,毫無懸念地會選有實作 ng update
的那個 Library 。
希望今天的說明能讓各位讀者感覺到 Schematics 所帶來的便利,畢竟 Angular 提供了這麼棒的工具讓我們使用,也已經有這麼多使用案例與 Library ,不趕快學會怎麼製作就太可惜了!!
明天我們將開始製作自己的第一個 Schematics ,敬請期待!