|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
|
|
"translation_date": "2025-10-22T22:38:29+00:00",
|
|
|
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 作業：探索現代網頁開發工具
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
網頁開發生態系統包含數百種專門工具，幫助開發者高效地構建、測試和維護應用程式。你的任務是研究並了解補充本課程中所涵蓋工具的其他工具。
|
|
|
|
|
|
**你的任務：** 選擇 **三個工具**，這些工具必須是 **本課程未涵蓋的**（避免選擇已列出的程式碼編輯器、瀏覽器或命令列工具）。重點放在解決現代網頁開發工作流程中特定問題的工具。
|
|
|
|
|
|
**對每個工具，提供以下內容：**
|
|
|
|
|
|
1. **工具名稱及類別**（例如：「Figma - 設計工具」或「Jest - 測試框架」）
|
|
|
2. **用途及優勢** - 用2-3句話解釋為什麼網頁開發者會使用這個工具，以及它解決了哪些問題
|
|
|
3. **官方文件連結** - 提供工具的官方文件或網站連結（不要僅提供教學網站）
|
|
|
4. **實際應用情境** - 提到此工具如何融入專業開發工作流程中的一種方式
|
|
|
|
|
|
## 建議的工具類別
|
|
|
|
|
|
可以考慮探索以下類別的工具：
|
|
|
|
|
|
| 類別 | 範例 | 功能 |
|
|
|
|------|------|------|
|
|
|
| **建構工具** | Vite, Webpack, Parcel, esbuild | 打包並優化生產環境的程式碼，提供快速的開發伺服器 |
|
|
|
| **測試框架** | Vitest, Jest, Cypress, Playwright | 確保程式碼正確運行並在部署前捕捉錯誤 |
|
|
|
| **設計工具** | Figma, Adobe XD, Penpot | 協作創建模型、原型和設計系統 |
|
|
|
| **部署平台** | Netlify, Vercel, Cloudflare Pages | 自動化 CI/CD，託管和分發網站 |
|
|
|
| **版本控制** | GitHub, GitLab, Bitbucket | 管理程式碼變更、協作和專案工作流程 |
|
|
|
| **CSS 框架** | Tailwind CSS, Bootstrap, Bulma | 使用預建的元件庫加速樣式設計 |
|
|
|
| **套件管理工具** | npm, pnpm, Yarn | 安裝和管理程式庫及依賴項 |
|
|
|
| **無障礙工具** | axe-core, Lighthouse, Pa11y | 測試包容性設計及符合 WCAG 標準 |
|
|
|
| **API 開發** | Postman, Insomnia, Thunder Client | 在開發過程中測試和記錄 API |
|
|
|
|
|
|
## 格式要求
|
|
|
|
|
|
**對每個工具：**
|
|
|
```
|
|
|
### [Tool Name] - [Category]
|
|
|
|
|
|
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
|
|
|
|
|
**Documentation:** [Official website/documentation link]
|
|
|
|
|
|
**Workflow Integration:** [1 sentence about how it fits into development process]
|
|
|
```
|
|
|
|
|
|
## 品質指導方針
|
|
|
|
|
|
- **選擇最新工具**：選擇在2025年仍被積極維護且廣泛使用的工具
|
|
|
- **聚焦價值**：解釋具體的優勢，而不僅僅是工具的功能
|
|
|
- **專業情境**：考慮開發團隊使用的工具，而不僅僅是個人愛好者
|
|
|
- **多樣化選擇**：從不同類別中選擇工具，展示生態系統的廣度
|
|
|
- **現代相關性**：優先選擇符合當前網頁開發趨勢和最佳實踐的工具
|
|
|
|
|
|
## 評分標準
|
|
|
|
|
|
| 優秀 | 良好 | 需要改進 |
|
|
|
|------|------|----------|
|
|
|
| **清楚解釋為什麼開發者使用每個工具及其解決的問題** | **解釋工具的功能，但缺乏部分價值的背景** | **僅列出工具，未解釋其用途或優勢** |
|
|
|
| **為所有工具提供官方文件連結** | **大部分提供官方連結，僅1-2個為教學網站** | **主要依賴教學網站而非官方文件** |
|
|
|
| **選擇最新、專業使用的多樣化工具** | **選擇不錯的工具，但類別有限** | **選擇過時工具或僅限於一個類別** |
|
|
|
| **展示工具如何融入開發工作流程的理解** | **顯示部分專業情境的理解** | **僅聚焦工具功能，未提及工作流程情境** |
|
|
|
|
|
|
> 💡 **研究提示**：尋找網頁開發職位招聘中提到的工具，查看受歡迎的開發者調查，或探索 GitHub 上成功的開源專案所使用的依賴項！
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
