Schematics 是 Angular CLI 中用于代碼生成和變更的模板系統(tǒng)，通過預(yù)定義規(guī)則自動化創(chuàng)建、修改或刪除文件。它在執(zhí)行 ng generate 命令時根據(jù)項目結(jié)構(gòu)生成相應(yīng)代碼文件。要自定義 Schematics，1. 創(chuàng)建 schematics 項目；2. 編寫 Rule 函數(shù)實現(xiàn)邏輯；3. 定義模板文件；4. 打包發(fā)布或本地鏈接。使用時可在 angular.json 配置 schematics collection，指定樣式、前綴等參數(shù)。常見用途包括統(tǒng)一命名規(guī)范、自動添加路由、集成第三方庫、批量修改代碼。建議使用 --dry-run 參數(shù)預(yù)覽改動以避免錯誤操作。掌握 Schematics 可顯著提升開發(fā)效率并適應(yīng)個性化開發(fā)需求。

Angular CLI 的 Schematics 是一個非常實用的工具，能幫助開發(fā)者自動化生成代碼結(jié)構(gòu)，提升開發(fā)效率。如果你已經(jīng)用過 Angular CLI 的 ng generate 命令，比如生成組件、服務(wù)或者模塊，那你就已經(jīng)用到了 Schematics。它背后的工作機制就是通過預(yù)定義的“藍(lán)圖”來生成符合項目結(jié)構(gòu)的代碼文件。

下面我們就來看看在實際項目中，如何更有效地使用 Angular CLI 的 Schematics 來做代碼生成。

什么是 Schematics？

Schematics 是 Angular CLI 中用于代碼生成和變更的模板系統(tǒng)。它本質(zhì)上是一組規(guī)則，描述了如何創(chuàng)建、修改或刪除文件。這些規(guī)則可以是簡單的文件復(fù)制，也可以是復(fù)雜的 AST（抽象語法樹）操作。

舉個例子：當(dāng)你運行 ng generate component my-component，CLI 會調(diào)用 @schematics/angular:component 這個 schematic，根據(jù)模板生成組件的 .ts, .html, .css 和 .spec.ts 文件。

如何自定義 Schematics？

有時候 Angular 官方提供的 schematics 不足以滿足團隊的代碼規(guī)范或項目結(jié)構(gòu)需求。這時，你可以創(chuàng)建自己的 custom schematics。

自定義 schematics 的幾個關(guān)鍵步驟：

• 創(chuàng)建一個 schematics 項目（可以使用 schematics-cli）
• 編寫 schematic 的邏輯（通常是一個或多個 Rule 函數(shù)）
• 定義模板文件（放在 files 文件夾中）
• 打包并發(fā)布為 npm 包，或者本地鏈接到項目中

舉個簡單的例子：你想讓所有新生成的組件自動添加一個 trackBy 方法。你就可以寫一個 custom schematic，在生成組件后自動修改 .ts 文件，插入該方法。

如何在項目中使用自定義 Schematics？

一旦你寫好了自己的 schematics，可以通過以下方式引入到項目中：

• 把 schematics 打包成 npm 包發(fā)布，然后通過 npm install 安裝
• 使用 npm link 或 yarn link 在本地調(diào)試

安裝完成后，你可以在 angular.json 中配置 schematics 的 collection：

"schematics": {
  "@mycompany/schematics:component": {
    "style": "scss",
    "prefix": "app"
  }
}

這樣，當(dāng)你運行 ng generate component my-comp 時，就會使用你自定義的 schematics 來生成組件。

常見使用場景和技巧

• 統(tǒng)一命名規(guī)范：比如組件名自動加前綴，或 service 文件名統(tǒng)一為 *.data.service.ts
• 自動添加路由配置：生成組件時自動在模塊的路由中注冊
• 集成第三方庫：比如生成一個使用 NgZorro 的表單組件時，自動導(dǎo)入模塊和樣式
• 批量修改代碼：比如升級版本時，自動替換某些 API 的使用方式

一個小技巧： 使用 --dry-run（或 -d）參數(shù)可以在生成代碼前預(yù)覽改動，避免誤操作。

基本上就這些。Angular CLI 的 Schematics 功能強大但并不復(fù)雜，關(guān)鍵是理解它的運行機制和如何結(jié)合項目需求來定制。一開始可能會覺得有點抽象，但一旦用起來，你會發(fā)現(xiàn)它能幫你節(jié)省大量重復(fù)勞動。

以上是代碼生成的角度CLI示意圖的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！