客戶端工具概覽

現代工具概覽

為 Web 編寫軟體隨著時間的推移變得越來越複雜。儘管手動編寫 HTML、CSS 和 JavaScript 仍然完全合理，但現在有大量的工具可供開發人員使用，以加快構建網站或應用程式的過程。

有一些非常成熟的工具已經成為開發社群中家喻戶曉的“通用名稱”，每天都有新的工具被編寫和釋出以解決特定問題。您甚至可能會發現自己編寫了一段軟體來幫助自己的開發過程，以解決現有工具似乎尚未處理的特定問題。

專案可以包含的工具數量之多，很容易讓人不知所措。同樣，像 webpack 這樣的工具的單個配置檔案可以長達數百行，其中大部分是似乎能完成任務的神奇咒語，但只有資深工程師才能完全理解！

即使是最有經驗的 Web 開發人員，有時也會遇到工具問題；在甚至還沒有觸及一行應用程式程式碼之前，就可能浪費數小時嘗試使工具管道正常工作。如果您過去曾為此苦惱，請不要擔心 — 您並不孤單。

在這些文章中，我們不會回答關於 Web 工具的所有問題，但我們會為您提供一個有用的起點，讓您瞭解基礎知識，然後您可以以此為基礎進行構建。與任何複雜的主題一樣，從小處著手，然後逐步達到更高階的用途是好的。

現代工具生態系統

當今現代的開發工具生態系統非常龐大，因此對工具解決的主要問題有一個大致的瞭解很有用。如果您在最喜歡的搜尋引擎上搜索“前端開發工具”，您將得到從文字編輯器到瀏覽器，再到可用於做筆記的筆的各種結果。

儘管您的程式碼編輯器選擇無疑是一種工具選擇，但本系列文章將超越這一點，專注於幫助您更高效地生成 Web 程式碼的開發工具。我們將推薦一些特定的工具，接下來的教程將向您展示如何使用它們。它們是撰寫本文時流行且標準的工具。如果您瞭解其他工具的相對優勢，這並不妨礙您使用它們。

從宏觀角度來看，您可以將客戶端工具分為以下四大類待解決問題：

• 環境 — 幫助您設定開發環境的工具，例如安裝和執行其他工具。
• 安全網 — 在程式碼開發過程中有用的工具。
• 轉換 — 以某種方式轉換程式碼的工具，例如，將中間語言轉換為瀏覽器可以理解的 JavaScript。
• 開發後 — 編寫程式碼後有用的工具，例如測試和部署工具。

讓我們更詳細地瞭解這些。

環境

編輯器、作業系統和瀏覽器都是開發環境。我們將假設您已經選擇了最適合您的環境。但是，在安裝和執行其他工具之前，還需要做出兩個選擇：

• 您將在何處執行這些工具。大多數本地執行的工具都是用 JavaScript 編寫的，因此您需要在計算機上安裝一個可以從命令列呼叫的 JavaScript 直譯器（而不是瀏覽器中的）。Node.js 仍然是行業標準，我們將使用它。Bun 旨在替代 Node.js，以其速度和強大的 API 而聞名。
• 您將如何安裝工具，換句話說，就是包管理器。Node 預設提供 npm，所以我們將使用它。Yarn 和 pnpm 是其他流行的選擇，各自具有速度、專案管理等優勢。

安全網

這些工具使您編寫的程式碼更好一點。

工具的這一部分應特定於您自己的開發環境，儘管公司通常會提供某種策略或預設配置供安裝，以便所有開發人員都使用相同的流程。

這包括任何使您的開發過程更容易生成穩定可靠程式碼的東西。安全網工具還應幫助您防止錯誤或自動糾正錯誤，而無需每次都從頭開始構建程式碼。

以下是一些開發人員常用的安全網工具型別。

程式碼檢查工具

程式碼檢查工具是檢查程式碼並告訴您存在的任何錯誤、錯誤型別以及它們所在的行號的工具。通常，程式碼檢查工具不僅可以配置為報告錯誤，還可以報告您團隊可能正在使用的指定樣式指南的任何違規行為（例如，使用錯誤數量的空格進行縮排，或使用 模板字面量 而不是常規字串字面量）。

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，並且所有這些語言都有轉換工具。轉換提供了三個主要好處（除其他外）：

1. 能夠使用最新的語言功能編寫程式碼，並將其轉換為可在日常裝置上執行的程式碼。例如，您可能希望使用尖端的新語言功能編寫 JavaScript，但仍希望最終的生產程式碼在不支援這些功能的舊瀏覽器上執行。很好的例子包括：

   • Babel：一個 JavaScript 編譯器，允許開發人員使用尖端 JavaScript 編寫程式碼，然後 Babel 將其轉換為更多瀏覽器可以理解的舊式 JavaScript。開發人員還可以編寫和釋出 Babel 外掛。
   • PostCSS：做與 Babel 相同的事情，但用於尖端 CSS 功能。如果沒有使用舊 CSS 功能的等效方法，PostCSS 將安裝 JavaScript polyfill 來模擬您想要的 CSS 效果。

2. 選擇用完全不同的語言編寫程式碼，並將其轉換為 Web 相容語言。例如：

   • Sass/SCSS：此 CSS 擴充套件允許您使用變數、巢狀規則、混合、函式和許多其他功能，其中一些功能在原生 CSS 中可用（例如變數），而另一些則不可用。
   • TypeScript：TypeScript 是 JavaScript 的超集，提供了許多額外功能。TypeScript 編譯器在生產構建時將 TypeScript 程式碼轉換為 JavaScript。
   • 諸如 React、Ember 和 Vue 等框架：框架免費提供大量功能，並允許您透過基於原生 JavaScript 構建的自定義語法來使用它們。在後臺，框架的 JavaScript 程式碼努力解釋這種自定義語法並將其渲染為最終的 Web 應用程式。

3. 最佳化。這由打包工具提供，這些工具將您的程式碼準備好用於生產，例如透過“搖樹”以確保只有您實際使用的程式碼庫部分被放入最終生產程式碼中，或“壓縮”以刪除生產程式碼中的所有空格，使其在上傳到伺服器之前儘可能小。例如：

   • Webpack 長期以來一直是最受歡迎的打包工具，擁有大量的外掛和強大的配置系統。然而，它也以設定複雜且與更現代的替代品相比速度慢而聞名。
   • Vite 是一種更現代的構建工具，以其速度、簡單性和豐富的功能而聞名。

開發後

開發後工具確保您的軟體釋出到網路並持續執行。這包括部署流程、測試框架、審計工具等。

開發過程的這個階段是您希望主動互動最少的階段，因此一旦配置完成，它就會大部分自動執行，只有在出現問題時才會彈出打個招呼。

測試工具

這些通常採用工具的形式，該工具會自動對您的程式碼執行測試，以確保在您進一步操作之前（例如，當您嘗試將更改推送到 GitHub 儲存庫時）它是正確的。這可以包括程式碼檢查，但也可以包括更復雜的過程，例如單元測試，您可以在其中執行部分程式碼，確保它們按預期執行。

• 編寫測試的框架包括 Jest、Mocha 和 Jasmine。
• 自動化測試執行和通知系統包括 Travis CI、Jenkins、Circle CI 和 其他。

部署工具

部署系統允許您釋出網站，可用於靜態和動態站點，並且通常與測試系統協同工作。例如，典型的工具鏈會等待您將更改推送到遠端倉庫，執行一些測試以檢視更改是否正常，如果測試透過，則會自動將您的應用程式部署到生產站點。

GitHub Pages 與 GitHub 本身很好地整合在一起，並且對所有公共倉庫都是免費的。其他服務，如 Netlify 和 Vercel 也非常受歡迎，它們具有慷慨的免費層配額、流暢的部署工作流和 GitHub 整合。

其他

在開發後階段還有其他幾種工具型別可供使用，包括用於收集程式碼質量指標的 Code Climate、用於執行跨瀏覽器相容性和其他檢查的執行時分析的 Webhint 瀏覽器擴充套件、用於提供更強大的 GitHub 功能的 GitHub bots、用於提供應用程式正常執行時間監控的 Updown 等等！

關於工具型別的一些思考

不同的工具型別在開發生命週期中確實有其應用順序，但請放心，您不必為了釋出一個網站而必須擁有所有這些工具。事實上，您不需要任何這些工具。然而，在您的流程中包含其中一些工具將改善您自己的開發體驗，並可能提高您程式碼的整體質量。

新的開發工具通常需要一些時間才能在複雜性方面穩定下來。最著名的工具之一 webpack 以其過於複雜而聞名，但在最新的主要版本中，大力推動簡化常見用法，因此所需的配置減少到絕對最低限度。

使用工具肯定沒有萬無一失的保證成功的方法，但隨著經驗的增加，您會找到適合您或您的團隊及其專案的工作流程。一旦流程中的所有問題都解決了，您的工具鏈應該是一個您可以忘記它，並且它應該正常工作的東西。

如何選擇特定工具並獲得幫助

大多數工具傾向於獨立編寫和釋出，因此儘管幾乎肯定有可用的幫助，但它從不在同一個地方或以相同的格式。因此，很難找到使用工具的幫助，甚至很難選擇使用哪種工具。關於哪些是最好的工具的知識有點部落化，這意味著如果您不是已經身處網路社群中，就很難確切地找出應該選擇哪些工具！這就是我們撰寫本系列文章的原因之一，希望能夠提供否則難以找到的第一步。

您可能需要以下各項的組合：

• 有經驗的老師、導師、同學或同事，他們有一些經驗，以前解決過此類問題，可以提供建議。

• 一個有用的特定搜尋地點。除非您已經知道要搜尋的工具名稱，否則針對前端開發工具的一般網路搜尋通常毫無用處。

  • 例如，如果您使用 npm 包管理器管理依賴項，那麼最好去 npm 主頁 搜尋您正在尋找的工具型別，例如，如果您想要日期格式化實用程式，可以嘗試搜尋“date”，如果您正在搜尋通用程式碼格式化程式，可以搜尋“formatter”。請注意流行度、質量和維護分數，以及包最近一次更新的時間。還要點選進入工具頁面，瞭解一個包的月下載量，以及它是否有良好的文件，您可以用來判斷它是否能滿足您的需求。根據這些標準，date-fns 庫 看起來是一個很好的日期格式化工具。您將在本模組的第 3 章中看到此工具的實際應用，並瞭解有關包管理器的更多資訊。
  • 如果您正在尋找一個外掛來將工具功能整合到您的程式碼編輯器中，請檢視程式碼編輯器的外掛/擴充套件頁面——例如，參見 VS Code 擴充套件。檢視首頁上的特色擴充套件，並再次嘗試搜尋您想要的擴充套件型別（或工具名稱，例如在 VS Code 擴充套件頁面上搜索“ESLint”）。當您獲得結果時，請檢視諸如擴充套件有多少星級或下載量等資訊，作為其質量的指標。

• 與開發相關的論壇，可以在上面提出關於使用哪些工具的問題，例如 MDN Learn Discourse 或 Stack Overflow。

當您選擇要使用的工具時，第一個目的地應該是工具專案主頁。這可能是一個功能完善的網站，也可能是一個程式碼倉庫中的單一自述檔案。date-fns 文件 例如，就非常出色、完整且易於遵循。然而，有些文件可能過於技術化和學術化，不適合您的學習需求。

相反，您可能想找一些專門的教程來學習如何使用特定型別的工具。一個很好的起點是搜尋像 CSS Tricks、Dev、freeCodeCamp 和 Smashing Magazine 這樣的網站，因為它們是針對 Web 開發行業的。

同樣，您可能會在尋找適合您的工具時嘗試多種不同的工具，試用它們，看看它們是否有意義、是否受到良好支援以及是否能實現您的預期。這很好——這都是學習的好機會，隨著經驗的增加，道路會變得更加順暢。

總結

到此為止，我們對客戶端 Web 工具的主題進行了高階的初步介紹。接下來我們將研究包管理器。

• 概述：理解客戶端 Web 開發工具
• 下一頁