什么是構(gòu)建工具?構(gòu)建工具通過捆綁簡化流程，使React和Angular等現(xiàn)代Web框架更易于使用。通過使用構(gòu)建命令，可以將站點的動態(tài)JavaScript版本轉(zhuǎn)換為靜態(tài)綁定內(nèi)容。但是，很多程序員都不清楚構(gòu)建工具究竟做了什么，這些工具將項目打包到可以部署的軟件包中。不僅為網(wǎng)站創(chuàng)建了一個生產(chǎn)級的捆綁包，還提供了腳本化的方式將這些捆綁包提升為更小的模塊，以便延遲加載和優(yōu)化速度。

1976年，Stuart Feldman在親眼目睹同事調(diào)試一個程序失敗之后受到啟發(fā)，隨即創(chuàng)建了Make，通過使用Make config文件和自動化來構(gòu)建程序。

近年來，隨著JavaScript逐漸成為一種需要認真對待的編程語言，像Make這樣的舊概念，如Make的腳本和編譯自動化也再度走入公眾視線。 現(xiàn)在，程序員可以使用yarn和npm等工具注入節(jié)點(服務(wù)器端JavaScript)包，也可以通過使用諸如webpack或gulp之類的工具刪除空白以縮小JavaScript項目，這些功能使網(wǎng)站的打包更容易維護。

在20世紀90年代的互聯(lián)網(wǎng)中，所有的內(nèi)容都從包含HTML和CSS的系列文件夾中提供。通過使用腳本標記，JavaScript是可選的。

這些都是美好的，因為不需要大量的JavaScript知識來呈現(xiàn)網(wǎng)頁內(nèi)容。此外，網(wǎng)絡(luò)是快速且安全的，并可以在任何可獲得撥號連接的地方上網(wǎng)。

在2000年以后，網(wǎng)絡(luò)變得更加復(fù)雜。寬帶互聯(lián)網(wǎng)帶來了巨大的速度提升，像Wordpress和Drupal的動態(tài)框架給了程序員很大的靈活性，包含在頁面上的JavaScript數(shù)量大大增加。程序員不能再依靠一些JavaScript代碼片段來完成工作。像Angular這樣的JavaScript框架為項目提供了更好的組織，使得廣泛的應(yīng)用變得更加容易。

在2010年初，Angular做了大量的代碼組織工作和開發(fā)速度優(yōu)化，通過代碼重用使自然制作的項目規(guī)模更小，但是性能和頁面速度仍然是問題。雖然許多人擁有無限制的帶寬來瀏覽這些復(fù)雜的網(wǎng)絡(luò)項目，但最終仍然有可能危及網(wǎng)絡(luò)的安全性和可擴展性。

從一個可以將index.html文件傳送到云端的世界轉(zhuǎn)移到需要節(jié)點來隨時提供服務(wù)器渲染的階段。幸運的是，90年代的夢想仍然存在，因為構(gòu)建工具正在利用動態(tài)放置的腳本標記來制作曾經(jīng)非常復(fù)雜的靜態(tài)內(nèi)容。

這就是構(gòu)建工具發(fā)揮作用的地方，它們將動態(tài)呈現(xiàn)的內(nèi)容渲染成靜態(tài)內(nèi)容。建立靜態(tài)內(nèi)容極大地提高了網(wǎng)站的速度和規(guī)模。它還通過抽象客戶端數(shù)據(jù)庫或其他敏感信息來增加額外的安全層。像minification(刪除空白)和模塊綁定的最佳實踐現(xiàn)在可以從CLI命令完成，并從構(gòu)建腳本自動完成。

構(gòu)建工具正在使靜態(tài)相關(guān)

隨著網(wǎng)站建設(shè)變得越來越復(fù)雜，構(gòu)建工具成為處理這種復(fù)雜性的必要條件。JavaScript的原始交互是通過使用腳本標記來實現(xiàn)的。通過嵌入腳本標簽，程序員可以訪問一系列JavaScript功能，如觸發(fā)動畫和通過DOM操作內(nèi)容。

這個解決方案來自像npm這樣的工具，通過使用CDN使依賴管理變得更容易。程序員可以利用npm來安裝JavaScript節(jié)點模塊，以便在項目中使用像webpack這樣的構(gòu)建工具將所有JavaScript綁定到index.html中的單個腳本標記。

現(xiàn)在，JavaScript可以被捆綁到一個靜態(tài)的index.html中。無論框架多么復(fù)雜，或者使用的JavaScript多么復(fù)雜，構(gòu)建工具都可以消除復(fù)雜性并為部署提供靜態(tài)內(nèi)容。構(gòu)建過程引入了解決方案，確保網(wǎng)站的輸出經(jīng)過優(yōu)化，可以在任何屏幕和連接上呈現(xiàn)。

構(gòu)建工具的興起帶動了JavaScript的發(fā)展，其中大部分是由于JavaScript工具和框架的快速發(fā)展而出現(xiàn)的。有許多構(gòu)建工具可供選擇，其中一些已經(jīng)存在了一段時間，另一些剛剛起步。毫無疑問，還會有新的來臨。了解哪一個是最合適的構(gòu)建工具是有必要的，我建議Gulp或webpack工具，二者是非常好的示例。這兩個工具都具有強大的社區(qū)，并且可以將大量JavaScript應(yīng)用程序捆綁成可管理的靜態(tài)內(nèi)容。