客戶端工具概述
本文概述了現代 Web 工具，介紹了有哪些工具以及在 Web 應用程式開發生命週期中的位置，以及如何查詢特定工具的幫助。
| 先決條件 | 熟悉核心HTML、CSS和JavaScript語言。 |
|---|---|
| 目標 | 瞭解有哪些型別的客戶端工具，以及如何查詢工具並獲得幫助。 |
現代工具概述
隨著時間的推移，為網路編寫軟體變得越來越複雜。雖然完全可以用“手工”編寫HTML、CSS和JavaScript，但現在開發人員可以使用大量工具來加快構建網站或應用程式的過程。
有一些非常成熟的工具已成為開發社群中常見的“家喻戶曉”的名字，並且每天都有新的工具被編寫和釋出以解決特定問題。你甚至可能會發現自己正在編寫軟體來輔助自己的開發過程，以解決現有工具似乎無法處理的特定問題。
一個專案中可以包含的工具數量之多很容易讓人不知所措。同樣，像Webpack這樣的工具的單個配置檔案可能長達數百行，其中大部分是看似可以完成任務的神奇咒語，只有經驗豐富的工程師才能完全理解！
即使是最有經驗的 Web 開發人員，有時也會遇到工具問題；在接觸任何一行應用程式程式碼之前，就有可能浪費數小時嘗試使工具管道正常工作。如果你在過去遇到過這樣的困境，那麼不用擔心——你並不孤單。
在這些文章中，我們不會回答關於 Web 工具的每一個問題，但我們會為你提供一個理解基礎知識的有用起點，你可以以此為基礎繼續學習。與任何複雜主題一樣，最好從小處著手，逐漸過渡到更高階的用法。
現代工具生態系統
當今的現代開發人員工具生態系統非常龐大，因此瞭解工具解決的主要問題有哪些是有用的。如果你開啟你喜歡的搜尋引擎並搜尋“前端開發工具”，你會看到大量的結果，從文字編輯器到瀏覽器，再到你可以用來做筆記的筆。
雖然你選擇的程式碼編輯器無疑是一種工具選擇，但本系列文章將超越這一點，重點關注幫助你更高效地生成 Web 程式碼的開發人員工具。我們將推薦一些特定的工具，接下來的教程將向你展示如何使用它們。這些工具在撰寫本文時很流行且標準。如果你瞭解它們的相對優勢，則不排除使用其他工具的可能性。
從高階角度來看，你可以將客戶端工具分為以下四大類問題來解決
- 環境——幫助你設定開發環境的工具，例如安裝和執行其他工具。
- 安全網——在你編寫程式碼期間有用的工具。
- 轉換——以某種方式轉換程式碼的工具，例如將中間語言轉換為瀏覽器可以理解的 JavaScript。
- 開發後——在你編寫程式碼後有用的工具，例如測試和部署工具。
讓我們更詳細地瞭解一下每個工具。
環境
編輯器、作業系統和瀏覽器都是開發環境。我們假設你已經選擇了一個你最舒適的環境。但是，在安裝和執行其他工具之前，還有兩個選擇需要做出
安全網
這些工具可以使你編寫的程式碼稍微好一些。
工具的這一部分應該特定於你自己的開發環境，儘管公司通常會有一些策略或預先配置好的配置可供安裝，以便所有開發人員都使用相同的流程。
這包括任何使你的開發過程更容易生成穩定可靠程式碼的工具。安全網工具還應該幫助你預防錯誤或自動更正錯誤，而無需每次都從頭開始構建程式碼。
以下是一些開發人員常用的安全網工具型別。
程式碼風格檢查器
程式碼風格檢查器是檢查程式碼並告知你其中存在的任何錯誤、錯誤型別以及錯誤所在程式碼行的工具。通常，可以配置程式碼風格檢查器不僅報告錯誤，還可以報告團隊可能使用的指定樣式指南的任何違規行為（例如，使用錯誤空格數進行縮排的程式碼，或使用模板字面量而不是常規字串字面量）。
ESLint 是行業標準的 JavaScript 程式碼風格檢查器——一個高度可配置的工具，用於捕獲潛在的語法錯誤並在整個程式碼中鼓勵“最佳實踐”。一些公司和專案也分享了他們的 ESLint 配置。
你還可以找到其他語言的程式碼風格檢查工具，例如stylelint。
原始碼控制
也稱為版本控制系統（VCS），原始碼控制對於備份工作和團隊協作至關重要。典型的 VCS 包括你進行更改的程式碼的本地版本。然後，你將更改“推送”到儲存在某個伺服器上的遠端儲存庫中的程式碼的“主”版本。通常有一種方法可以控制和協調對程式碼“主”副本的更改以及更改時間，因此開發人員團隊不會一直覆蓋彼此的工作。
Git 是如今大多數人使用的原始碼控制系統。它主要透過命令列訪問，但也可以透過友好的使用者介面訪問。將程式碼放入 Git 儲存庫後，你可以將其推送到你自己的伺服器例項，或使用託管原始碼控制網站，例如GitHub、GitLab 或BitBucket。
我們將在本模組中使用 GitHub。你可以在Git 和 GitHub中找到更多相關資訊。
程式碼格式化工具
程式碼格式化工具與程式碼風格檢查器有些相關，但它們通常不是指出程式碼中的錯誤，而是確保程式碼根據你的樣式規則正確格式化，理想情況下會自動修復發現的錯誤。
Prettier 是一個非常流行的程式碼格式化工具示例，我們將在本模組後面的內容中使用它。
型別檢查器
型別檢查器是透過檢查程式碼在正確位置使用正確型別的資料來幫助你編寫更可靠程式碼的工具。這可以防止常見型別的錯誤，例如訪問不存在的屬性、意外的undefined等。
TypeScript 是 JavaScript 事實上的標準型別檢查器。它提供了自己的型別註釋語法，並且在某種程度上本身就是一門語言，因此我們不會在本模組中介紹它。
轉換
Web 應用程式生命週期的這一階段通常允許你使用“未來程式碼”（例如最新的 CSS 或 JavaScript 功能，這些功能可能尚未在瀏覽器中得到原生支援）或完全使用其他語言（例如 TypeScript）進行編碼。然後，轉換工具將為你生成與瀏覽器相容的程式碼，用於生產環境。
通常，Web 開發被認為是三種語言：HTML、CSS 和JavaScript，並且所有這些語言都有轉換工具。轉換提供了三個主要好處（以及其他好處）
- 能夠使用最新的語言功能編寫程式碼，並將這些程式碼轉換為可以在日常裝置上執行的程式碼。例如，你可能希望使用最先進的新語言功能編寫 JavaScript，但仍希望最終的生產程式碼可以在不支援這些功能的舊版瀏覽器上執行。這裡的一些很好的例子包括
- 可以選擇用完全不同的語言編寫程式碼，並將其轉換為與 Web 相容的語言。例如
- Sass/SCSS：此 CSS 擴充套件允許你使用變數、巢狀規則、mixin、函式和許多其他功能，其中一些功能在原生 CSS 中可用（例如變數），而另一些則不可用。
- TypeScript：TypeScript 是 JavaScript 的超集，提供了一系列附加功能。TypeScript 編譯器在構建生產環境時將 TypeScript 程式碼轉換為 JavaScript。
- React、Ember 和Vue 等框架：框架免費提供了許多功能，並允許你透過構建在原生 JavaScript 之上的自定義語法來使用它。在後臺，框架的 JavaScript 程式碼努力解釋此自定義語法並將其呈現為最終的 Web 應用程式。
- 最佳化。這是由打包器提供的，打包器是使你的程式碼準備好用於生產環境的工具，例如透過“tree-shaking”確保僅將你實際使用的程式碼庫部分放入最終的生產程式碼中，或者透過“壓縮”刪除生產程式碼中的所有空格，使其在上傳到伺服器之前儘可能小。例如
開發後階段
開發後工具確保您的軟體能夠成功釋出到網路並持續執行。這包括部署流程、測試框架、審計工具等等。
您希望在這個開發階段儘可能減少主動互動，以便在配置完成後，它能夠基本自動執行，只有在出現錯誤時才會提示。
測試工具
這些工具通常會自動對您的程式碼進行測試，以確保其正確性，然後再進行下一步操作（例如，當您嘗試將更改推送到 GitHub 倉庫時）。這可能包括程式碼風格檢查，但也包括更復雜的流程，例如單元測試，您可以在其中執行部分程式碼，並確保其按預期執行。
部署工具
部署系統允許您釋出網站，適用於靜態和動態網站，並且通常與測試系統協同工作。例如，一個典型的工具鏈會等待您將更改推送到遠端倉庫，執行一些測試以檢視更改是否正常，然後如果測試透過，則自動將您的應用程式部署到生產環境。
GitHub Pages 與 GitHub 本身很好地整合，並且所有公共倉庫都可以免費使用。其他服務，例如 Netlify 和 Vercel，也非常受歡迎，它們提供慷慨的免費套餐配額、流暢的部署工作流程以及 GitHub 整合。
其他
在開發後階段，還有其他幾種可用的工具型別，包括 Code Climate 用於收集程式碼質量指標，webhint 瀏覽器擴充套件 用於執行跨瀏覽器相容性和其他檢查的執行時分析，GitHub 機器人 用於提供更強大的 GitHub 功能，Updown 用於提供應用程式正常執行時間監控，以及更多其他工具！
關於工具型別的思考
不同的工具型別在開發生命週期中確實存在一定的應用順序，但請放心，您**不必**擁有所有這些工具才能釋出網站。事實上，您根本不需要任何這些工具。但是，在您的流程中包含一些這些工具將改善您自己的開發體驗，並可能提高程式碼的整體質量。
新的開發工具通常需要一段時間才能穩定其複雜性。其中一個最著名的工具 Webpack 因其過於複雜的易用性而聞名，但在最新的主要版本中，開發團隊大力推動了簡化常用功能，因此所需的配置減少到最低限度。
當然，沒有萬能的工具可以保證使用工具的成功，但隨著您經驗的增長，您會找到適合**您**或您的團隊及其專案的流程。一旦流程中的所有問題都得到解決，您的工具鏈就應該成為您可以忽略的東西，並且它**應該**能夠正常工作。
如何選擇特定工具並獲得幫助
大多數工具往往是獨立編寫和釋出的，因此儘管幾乎肯定有可用的幫助，但它們從未出現在相同的位置或格式中。因此，可能難以找到使用工具的幫助，甚至難以選擇要使用的工具。關於哪些是最佳工具的知識有點像“部落知識”，這意味著如果您還沒有加入 Web 社群，很難確切地知道哪些工具適合您！這就是我們撰寫本系列文章的原因之一，希望能提供這個最初的步驟，否則很難找到。
您可能需要結合以下內容
- 經驗豐富的教師、導師、同學或同事，他們具有一定的經驗，以前解決過此類問題，並且可以提供建議。
- 一個有用的特定搜尋位置。除非您已經知道要搜尋的工具的名稱，否則一般性的前端開發工具網路搜尋通常毫無用處。
- 例如，如果您使用 npm 包管理器來管理您的依賴項，那麼最好訪問 npm 主頁 並搜尋您要查詢的工具型別，例如，如果您想要一個日期格式化實用程式，可以嘗試搜尋“date”，或者如果您正在搜尋一個通用的程式碼格式化程式，可以搜尋“formatter”。注意受歡迎程度、質量和維護分數，以及包上次更新的時間。還可以點選工具頁面，瞭解包每月下載量，以及是否有良好的文件可以幫助您確定它是否滿足您的需求。根據這些標準，date-fns 庫 看起來是一個不錯的日期格式化工具。您將在本模組的第 3 章中看到此工具的實際應用，並瞭解有關包管理器的更多資訊。
- 如果您正在尋找一個外掛來將工具功能整合到您的程式碼編輯器中，請檢視程式碼編輯器的外掛/擴充套件頁面——例如，請檢視 VSCode 擴充套件。檢視首頁上的特色擴充套件，並再次嘗試搜尋您想要的擴充套件型別（或工具名稱，例如在 VSCode 擴充套件頁面上搜索“ESLint”）。獲得結果後，檢視擴充套件的星級或下載量等資訊，作為其質量的指標。
- 與開發相關的論壇，例如 MDN Learn Discourse 或 Stack Overflow，您可以在這裡詢問有關使用哪些工具的問題。
當您選擇了一個要使用的工具後，首先應該訪問工具專案的主頁。這可能是一個完整的網站，也可能是一個程式碼儲存庫中的單個自述檔案。例如，date-fns 文件 非常棒，完整且易於理解。但是，有些文件可能相當技術性和學術性，不適合您的學習需求。
相反，您可能希望找到一些專門的教程，以瞭解如何開始使用特定型別的工具。一個很好的起點是在 CSS Tricks、Dev、freeCodeCamp 和 Smashing Magazine 等網站上搜索，因為它們是針對 Web 開發行業的。
同樣，您可能會嘗試使用多個不同的工具，以找到適合您的工具，嘗試它們以檢視它們是否有意義、是否得到良好支援以及是否滿足您的需求。這很好——這對學習都有好處，並且隨著您獲得更多經驗，這條道路會變得越來越平坦。