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

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

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

什么是 Schematics？

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

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

如何自定義 Schematics？

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

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

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

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

如何在項(xiàng)目中使用自定義 Schematics？

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

• 把 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)你運(yùn)行 ng generate component my-comp 時(shí)，就會(huì)使用你自定義的 schematics 來生成組件。

常見使用場景和技巧

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

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

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

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