現(xiàn)代前端網(wǎng)絡(luò)開發(fā)是一種極端體驗：許多人喜歡它，其他人則鄙視它。
長沙網(wǎng)站建設(shè)是現(xiàn)代網(wǎng)絡(luò)開發(fā)的忠實粉絲，雖然我會把它描述為“神奇” - 魔術(shù)有其優(yōu)點和缺點：
當(dāng)您了解如何使用網(wǎng)絡(luò)開發(fā)的神奇工具（babel！bundlers！watchers！等！）時，您的開發(fā)工作流程快速，強大且令人愉快
如果你不明白的web開發(fā)的神奇工具，這是非常令人困惑
...并且試圖了解魔法是如何工作的常常是悲慘的，除非你有人幫助引導(dǎo)你解決網(wǎng)絡(luò)上的行話，熱點和過時的信息。
最近，我一直需要向那些只有粗略的香草網(wǎng)絡(luò)開發(fā)工作流程的人解釋“現(xiàn)代網(wǎng)絡(luò)開發(fā)工作流程”......
這很難解釋！
即使倉促的解釋也會持續(xù)很長時間。
因此，在努力編寫更多我的解釋時，這是對Web開發(fā)演變的長期而倉促解釋的開始：
第1部分：我們?nèi)绾螐撵o態(tài)網(wǎng)站到巴貝爾
- - - - - - - - - - -
最簡單的網(wǎng)站：靜態(tài)網(wǎng)站
讓我們從“經(jīng)典”前端Web開發(fā)開始，我將假設(shè)您 - 讀者已經(jīng)理解。
在經(jīng)典的前端Web開發(fā)中，我們直接修改HTML / CSS / JavaScript文件。要預(yù)覽更改，我們在瀏覽器中本地打開HTML文件，并在開發(fā)時刷新頁面以進(jìn)行更新。
開發(fā)流程
開發(fā)工作流程如下所示：
在Atom等文本編輯器中編輯HTML / CSS / JavaScript文件。
將文件保存在文本編輯器中。
在瀏覽器中打開并重新加載文件。
編輯JavaScript，保存文件，刷新頁面以查看更新
部署
然后，當(dāng)您想將網(wǎng)站發(fā)布到互聯(lián)網(wǎng)時，只需將HTML / CSS / JavaScript文件上傳到互聯(lián)網(wǎng)。
那太簡單了！為什么我們讓事情變得復(fù)雜？！
因此，如果您了解“經(jīng)典”Web開發(fā)工作流程的工作原理，您可能會問：Gee，這非常簡單方便。為什么我們偏離了那個？！為什么現(xiàn)代Web開發(fā)流程如此復(fù)雜？
簡短的回答：...好吧，也許我有兩個簡短的答案。
兩個簡短的答案：
你不具備，使之更加復(fù)雜。“經(jīng)典”的Web開發(fā)工作流程非常棒！并且足以滿足您的需求！您永遠(yuǎn)不應(yīng)該添加多余的工具或您不理解其目的的工具。
但對于某些項目，您將從更復(fù)雜的工作流程中受益。您添加到工作流程中的每個工具都旨在解決問題。
為了理解現(xiàn)代Web開發(fā)的工具，我們必須了解 Web開發(fā)的問題。
在這個漫長而倉促的旅程中，我們將逐個解決每個問題，從一個已經(jīng)存在了幾十年的舊網(wǎng)絡(luò)開發(fā)問題開始：
一個老問題：JavaScript的局限性
直到最近，JavaScript和Web API都有很多限制（由于無數(shù)的原因，這個長期'匆忙的帖子都不會涉及）。
舉幾個例子來說明：
沒有模塊
沒有常數(shù)
沒有承諾/異步
沒有Array.includes（）（!!）
很多常見基元的笨拙語法/缺失（沒有for-of，模板文字，箭頭函數(shù)語法，模板解包......）
（Web API）無數(shù)的DOM操作不必要地復(fù)雜（比如添加/刪除類名，隱藏元素，選擇元素，刪除元素......）
瀏覽器只能執(zhí)行JavaScript，因此當(dāng)JavaScript語言存在限制時，就不會像使用其他語言一樣; 你必須使用你擁有的東西。
旁白：JavaScript和Web API之間的區(qū)別？
您可能已經(jīng)注意到我在上面說過“JavaScript和Web API”。這是兩件不同的事情！
當(dāng)您為網(wǎng)頁編寫JavaScript時，任何與網(wǎng)頁本身交互的API調(diào)用都是Web API（恰好用JavaScript編寫），而不是JavaScript語言的一部分。
一些例子：
Web API：document以及每個方法document; window和每一種方法window; Event，XMLHttpRequest，fetch，等。
JavaScript的：函數(shù)，const/ let/ var，陣列，Promise等
因此，例如，如果您正在編寫Node.js服務(wù)器，那么您將使用JavaScript編寫，這意味著您可以使用例如Promises但您無法使用document.querySelector（也沒有意義這樣做）。
一個古老的解決方案：jQuery和朋友
早在2006年，jQuery就發(fā)布了：它是一個幫助解決JavaScript和Web API的許多缺點的庫。
jQuery包含有助于顯著處理常見Web任務(wù)的API，如DOM操作，異步處理，跨瀏覽器差異和資源獲取。
所以基本上：所有這些東西在技術(shù)上都是可能的，使用舊的JavaScript /舊的Web-APIS，但它們非常煩人，乏味，而且通常很難編寫代碼 - 所以不要讓每個Web開發(fā)人員編寫相同的繁瑣代碼，例如下載和進(jìn)程和JSON文件，您可以改為下載jQuery庫并使用jQuery的漂亮API。