介紹
了解 JavaScript 項目如何真正發揮作用一直讓我很感興趣。雖然我們中的許多人都精通編寫代碼，但并不是每個人都能清楚地解釋編寫代碼后幕后發生的情況。
在本文中，我們將探討一切在幕后是如何運作的。
超過 98.7% 的網站使用 JavaScript。
來源：Radixweb
概述
當您構建應用程序時，需要使用許多工具來提供美觀且高性能的應用程序：
??
轉譯器：它的工作是確保您的代碼可以在不同的環境中運行！ 將其視為確保您奶奶的舊電腦可以順利處理您的應用程序！
???♂?
捆綁器：就像超級英雄一樣，它優化您的代碼，使其更高效地加載和執行。它將您的所有資源捆綁到一個文件中，從而減少您的應用程序必須發出的請求數量。
?
任務運行器：這些是您開發過程中的黑暗騎士。 它們自動執行日常任務，例如文件縮小（壓縮代碼）、編譯（將 SCSS 轉換為 CSS）和圖像優化。它們使我們不必手動處理這些繁瑣的任務。
這些工具協同工作，創建簡化的開發流程，使開發人員能夠專注于構建功能，而不是處理兼容性或性能問題。
深入探討：它們是如何工作的
當您構建項目時，
任務運行者會編排流程，協調轉譯器和捆綁器以確保簡化且高效的構建。
Babel 等轉譯器獲取現代 Javascript (ES6+) 或 Typescript 中的源代碼，并將其轉換為與舊版瀏覽器 (ES5) 兼容的 Javascript。
像 Webpack 這樣的打包器會獲取所有文件（Javascript、CSS、圖像等…）并將它們編譯成更小的文件甚至單個文件。
在此過程中，Webpack 還通過最小化和壓縮代碼來優化代碼，從而減少加載時間并提高性能。
但我的項目沒有這些工具也能工作嗎？
是和否，如果沒有太多復雜性，您的項目就可以工作。
如果您開始增加復雜性，缺乏這些工具可能會帶來重大挑戰：
代碼兼容性：如果沒有轉譯器，您的 JavaScript 代碼可能無法在舊版瀏覽器上正確運行，從而限制了您的受眾。
性能：如果沒有捆綁器，您的應用程序可能會由于未優化的代碼交付而導致加載時間變慢。
效率：如果沒有任務運行程序，您將需要手動處理重復性任務，從而導致構建過程效率低下并可能出現錯誤。
示例工作流程
1 – 編寫現代 JavaScript 代碼：
您在源文件中編寫 ES6+ 或 TypeScript。
2 – 運行構建命令：
您執行觸發編譯器的構建命令（npm run build）。
–開始構建過程–
3 – 轉譯代碼：
轉譯器（例如 Babel）將您的 ES6+ 代碼轉換為 ES5。
4 – 捆綁文件：
捆綁器（例如 Webpack）然后獲取轉譯的文件并將它們組合成一個或幾個優化的文件。
— 構建過程結束 —
5 – 部署：
最終的捆綁文件已經準備好部署到服務器了。
任務運行器不是構建過程本身的一部分，而是編排它。它們通過與 Babel 和 Webpack 等工具集成來自動化和管理轉譯和捆綁等任務。從本質上講，任務運行程序簡化和協調整個構建過程，確保任務按正確的順序執行。
感謝您的閱讀?
