前言回顧

我們今天開始，從框架前端走向框架後端，看一看 NG-ZORRO 的原始碼是什麼樣的，從專案結構到簡單元件說明，來了解 NG-ZORRO 的設計模式。

準備環境

下載 ng-zorro-antd

$ git clone https://github.com/NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd && npm i
$ tree ./ -L 1

我們可以看到 terminal 輸出了目錄結構：

./
├── components
├── docs
├── integration
├── schematics
├── scripts
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README-zh_CN.md
├── README.md
├── angular.json
├── build-config.js
├── commitlint.config.js
├── gulpfile.js
├── logo.svg
├── ngsw-config.json
├── package-lock.json
├── package.json
├── setup-shared-libs.sh
├── tsconfig-build.json
├── tsconfig.json
└── tslint.json

核心目錄介紹

啟動

我們下載原始碼並安裝完依賴後，啟動它並訪問 http://localhost:4200/ 即可看到專案主頁：

$ npm run start

我們能夠在 terminal 中看到部分編譯過程，通過 gulp 工具拆分為多個 TASK 執行，現在我們能看到專案目錄下多了一個 site 資料夾，裡面存放了我們專案執行顯示頁的內容，那麼這些檔案是哪來的呢？

編譯過程

我們看到 site/doc/app 下包含了全部元件的示例程式碼和 API 說明檔案，實際上我們看一下 scripts/site/generate-site.js 構建主頁的指令碼就能看出一些端倪。

執行 npm run start 過程中，有一步就是將 components 目錄下元件資料夾裡的 demo 和 doc 資料夾複製出來生成 site 頁面，這樣的好處是顯而易見的，我們除錯過程中會自動被編譯到 site 資料夾下，從而能夠快速看到我們修改後的元件表現，不必在多個地方重複寫相同的示例程式碼，感興趣的同學可以修改任意元件的程式碼看一下效果。

更多的編譯過程可以參考 gulp 執行 start:dev 相關的 TASK：

task('start:dev', series(
  'clean',
  'start:site'
));

元件結構

我們以第一個元件 Button 來介紹一下元件結構，所有元件的檔案結構都是遵循此格式。

components/button
├── demo
├── doc
├── style
├── index.ts
├── nz-button-group.component.html
├── nz-button-group.component.ts
├── nz-button.component.html
├── nz-button.component.ts
├── nz-button.module.ts
├── nz-button.spec.ts
├── package.json
└── public-api.ts

通常開發元件時，這些專案都是必不可少的，其餘檔案為元件邏輯相關，所以一旦發現元件 bug，我們通常需要到邏輯程式碼檔案去除錯定位。

core 資料夾

我們看到 button 元件有些屬性引入了其他裝飾符，如：

import { InputBoolean } from 'ng-zorro-antd/core';
...
@Input() @InputBoolean() nzBlock: boolean = false;

這些通用方法存在 core 資料夾下，多個元件都需要使用的方法和指令都會存放到此資料夾下，更多內容大家可自行閱讀 相關檔案。

樣式檔案

通常我們不應該去修改 style 資料夾下的樣式檔案，因為這是和 ant-design 樣式同步，官方 Github 搭建了一個 機器人 去處理這些事務。

如果的確出現必須修改樣式情況，可以寫到 components/style/patch.less 檔案中去。

總結 & 預告

現在我們對整個專案有了一個大致的瞭解，各部分檔案功能也作了簡單說明，對於大部分情況，如果需要處理 bug 問題，只需要關注 components 資料夾下的檔案邏輯即可。之後我們也會從簡單元件切入，帶領大家去體驗如何建立一個元件。如果仍有不理解的地方，可以留言補充。:)

相關資料

• gulp：https://gulpjs.com/
• travis：https://docs.travis-ci.com/