![瀏覽相依關係
? 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)
More Related Content
What's hot (20)
Similar to Angular Taiwan 2019 - 大型 Angular 專案的的管理心得與技巧 (20)
![[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發](https://cdn.slidesharecdn.com/ss_thumbnails/random-180929054552-thumbnail.jpg?width=560&fit=bounds)
More from 升煌 黃 (11)
Recently uploaded (7)
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. 关於「架构」这件事
- 6. 大型 Angular 專案面對架構問題 ? 大量的功能頁面 ? 複雜的相依關係 ? 過長的應用程式建置時間 ? 小範圍修改卻要全部重新部署
- 7. 大型 Angular 專案面對人的問題 ? 團隊間使用技術不一致 ? 固定卻冗長的開發規則 ? 程式碼風格不一致
- 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
- 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. Angular Console
- 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
- 27. Resources
- 28. 相關資源 ? Nx.Dev (Official Document) ? Nrwl Connect (course + eBook + video) ? Enterprise Angular (eBook)
- 29. Thank You! Blog: https://wellwind.idv.tw/blog/ 全端開發人員天梯: https://www.facebook.com/fullstackledder