Download as PDF, PPTX
![瀏覽相依關係
• nx dep-graph
• 預設會分析程式碼判斷專案間的相依關係
• 可在 nx.json 內明確設定專案間是否相依
"dashboard": {
"tags": ["scope:dashboard"],
"implicitDependencies": ["todo-ui"]
}](https://image.slidesharecdn.com/ngtw2019-nx-191103122756/85/Angular-Taiwan-2019-Angular-21-320.jpg)
![使用 affected 功能
• nx affected:[target] --base [commit] --head [commit]
• nx affected:apps
• nx affected:libs
• nx affected:build
• nx affected:e2e
• nx affected:test
• nx affected:lint
• nx affected:dep-graph](https://image.slidesharecdn.com/ngtw2019-nx-191103122756/85/Angular-Taiwan-2019-Angular-23-320.jpg)
![Nx 8.7 新指令
• nx print-affected --target=[target]
• 將要執行動作的專案輸出成 JSON 格式
• nx list
• 列出所有可用的 schematics](https://image.slidesharecdn.com/ngtw2019-nx-191103122756/85/Angular-Taiwan-2019-Angular-25-320.jpg)
Angular Taiwan 2019 - 大型 Angular 專案的的管理心得與技巧
- 1. 大型 Angular 專案的 管理心得與技巧 多奇數位創意有限公司資深工程師 黃升煌 Mike Blog: https://wellwind.idv.tw/blog/ 全端開發人員天梯: https://www.facebook.com/fullstackledder
- 2. About Me Name 黃升煌 Mike Title 多奇數位創意有限公司全端工程師 Award • 2018 iT 邦幫忙鐵人賽 Modern Web 組冠軍 • 2019 iT 邦幫忙鐵人賽 優選
- 3.
- 5.
- 6. 大型 Angular 專案面對架構問題 •大量的功能頁面 • 複雜的相依關係 • 過長的應用程式建置時間 • 小範圍修改卻要全部重新部署
- 7. 大型 Angular 專案面對人的問題 •團隊間使用技術不一致 • 固定卻冗長的開發規則 • 程式碼風格不一致
- 8.
- 9. 使用 Monorepo 架構 •所有程式碼都在同一個 code base 下 • 程式透明度增加 • 程式可重複使用性增加 • 一致性的版本相依
- 10. 使用微前端 (micro frontends)架構 • 透過 Web Components 組合頁面功能 • 每個(組) Web Components 就是一個 獨立的 JavaScript 檔案 • 使用 Angular Elements 將元件轉成 Web Components • 使用 ngx-build-plus 將共用部分抽出
- 11. 開發規範與流程的一致化 • 使用 Schematics程式碼產生器 • 將共用步驟、邏輯自動化 • 自訂 schmatics • 使用 linter • 規範程式的相依規則 • 規範程式碼風格 • 自訂 tslint rule • code formatter • 確保程式碼風格的一致性 • prettier.io
- 12.
- 13. 使用 Nrwl Nx管理大型專案
- 14. Nx Introduction • Monorepo框架 • 提供一系列工具，來協助我們進行管理 • 前端支援：Angular / React / Web Components • 後端支援：Express / Nestjs
- 15. 建立 Nx workspace(Angular 範本) • 建立 Nx 工作區 • npx create-nx-workspace@latest ngtw19-nx-demo
- 16. 建立 Nx workspace(Angular 範本) • 建立 Nx 工作區 • npx create-nx-workspace@latest ngtw19-nx-demo • 加入 Angular 支援 • ng add @nrwl/angular --defaults • 建立 Angular 應用程式 • ng g @nrwl/angular:application todos • 建立 Angular 類別庫 • ng g @nrwl/angular:library todos
- 17.
- 18. Workspace lint • 替每個建立的專案依照類型加入tag • 在 tslint 中設定各類型專案的相依關係 • 使用 nx workspace-lint 檢查相依關係
- 19. 自動程式碼排版 • Nx 使用prettier 進行程式碼自動排版 • 自訂規則都在 prettierrc.json • 檢查是否有 format 問題：nx format:check • 強制 format：nx format:write
- 20. 建立 schematics • 建立一個schematic • ng g @nrwl/workspace my-schematic • 執行一個 schematic • nx workspace-schematic my-schematic • 省去自行 build 的步驟
- 21. 瀏覽相依關係 • nx dep-graph •預設會分析程式碼判斷專案間的相依關係 • 可在 nx.json 內明確設定專案間是否相依 "dashboard": { "tags": ["scope:dashboard"], "implicitDependencies": ["todo-ui"] }
- 22. 使用 affected 功能 •針對變更的程式碼，分析被影響的 applications & libraries • 只針對被影響的程式建置 • 只針對被影響的程式進行測試 • 視覺化影響範圍
- 23. 使用 affected 功能 •nx affected:[target] --base [commit] --head [commit] • nx affected:apps • nx affected:libs • nx affected:build • nx affected:e2e • nx affected:test • nx affected:lint • nx affected:dep-graph
- 24. Nx affected 常用參數 •--parallel：平行處理執行工作 • --maxParallel：同時平行處理多少個工作 • --all：不評估被影響的範圍，針對所有專案執行指定工作 • --exclude：指定不執行工作的專案 • --only-failed：只執行上次失敗的專案工作
- 25. Nx 8.7 新指令 •nx print-affected --target=[target] • 將要執行動作的專案輸出成 JSON 格式 • nx list • 列出所有可用的 schematics
- 26.
- 27.
- 28. 相關資源 • Nx.Dev (OfficialDocument) • Nrwl Connect (course + eBook + video) • Enterprise Angular (eBook)
- 29. Thank You! Blog: https://wellwind.idv.tw/blog/ 全端開發人員天梯:https://www.facebook.com/fullstackledder