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