現代前端網絡開發是一種極端體驗：許多人喜歡它，其他人則鄙視它。

長沙網站建設是現代網絡開發的忠實粉絲，雖然我會把它描述為“神奇” - 魔術有其優點和缺點：

當您了解如何使用網絡開發的神奇工具（babel！bundlers！watchers！等！）時，您的開發工作流程快速，強大且令人愉快

如果你不明白的web開發的神奇工具，這是非常令人困惑

...并且試圖了解魔法是如何工作的常常是悲慘的，除非你有人幫助引導你解決網絡上的行話，熱點和過時的信息。

最近，我一直需要向那些只有粗略的香草網絡開發工作流程的人解釋“現代網絡開發工作流程”......

這很難解釋！

即使倉促的解釋也會持續很長時間。

因此，在努力編寫更多我的解釋時，這是對Web開發演變的長期而倉促解釋的開始：

第1部分：我們如何從靜態網站到巴貝爾

- - - - - - - - - - -

最簡單的網站：靜態網站

讓我們從“經典”前端Web開發開始，我將假設您 - 讀者已經理解。

在經典的前端Web開發中，我們直接修改HTML / CSS / JavaScript文件。要預覽更改，我們在瀏覽器中本地打開HTML文件，并在開發時刷新頁面以進行更新。

開發流程

開發工作流程如下所示：

在Atom等文本編輯器中編輯HTML / CSS / JavaScript文件。

將文件保存在文本編輯器中。

在瀏覽器中打開并重新加載文件。

編輯JavaScript，保存文件，刷新頁面以查看更新

部署

然后，當您想將網站發布到互聯網時，只需將HTML / CSS / JavaScript文件上傳到互聯網。

那太簡單了！為什么我們讓事情變得復雜？！

因此，如果您了解“經典”Web開發工作流程的工作原理，您可能會問：Gee，這非常簡單方便。為什么我們偏離了那個？！為什么現代Web開發流程如此復雜？

簡短的回答：...好吧，也許我有兩個簡短的答案。

兩個簡短的答案：

你不具備，使之更加復雜。“經典”的Web開發工作流程非常棒！并且足以滿足您的需求！您永遠不應該添加多余的工具或您不理解其目的的工具。

但對于某些項目，您將從更復雜的工作流程中受益。您添加到工作流程中的每個工具都旨在解決問題。

為了理解現代Web開發的工具，我們必須了解 Web開發的問題。

在這個漫長而倉促的旅程中，我們將逐個解決每個問題，從一個已經存在了幾十年的舊網絡開發問題開始：

一個老問題：JavaScript的局限性

直到最近，JavaScript和Web API都有很多限制（由于無數的原因，這個長期'匆忙的帖子都不會涉及）。

舉幾個例子來說明：

沒有模塊

沒有常數

沒有承諾/異步

沒有Array.includes（）（!!）

很多常見基元的笨拙語法/缺失（沒有for-of，模板文字，箭頭函數語法，模板解包......）

（Web API）無數的DOM操作不必要地復雜（比如添加/刪除類名，隱藏元素，選擇元素，刪除元素......）

瀏覽器只能執行JavaScript，因此當JavaScript語言存在限制時，就不會像使用其他語言一樣; 你必須使用你擁有的東西。

旁白：JavaScript和Web API之間的區別？

您可能已經注意到我在上面說過“JavaScript和Web API”。這是兩件不同的事情！

當您為網頁編寫JavaScript時，任何與網頁本身交互的API調用都是Web API（恰好用JavaScript編寫），而不是JavaScript語言的一部分。

一些例子：

Web API：document以及每個方法document; window和每一種方法window; Event，XMLHttpRequest，fetch，等。

JavaScript的：函數，const/ let/ var，陣列，Promise等

因此，例如，如果您正在編寫Node.js服務器，那么您將使用JavaScript編寫，這意味著您可以使用例如Promises但您無法使用document.querySelector（也沒有意義這樣做）。

一個古老的解決方案：jQuery和朋友

早在2006年，jQuery就發布了：它是一個幫助解決JavaScript和Web API的許多缺點的庫。

jQuery包含有助于顯著處理常見Web任務的API，如DOM操作，異步處理，跨瀏覽器差異和資源獲取。

所以基本上：所有這些東西在技術上都是可能的，使用舊的JavaScript /舊的Web-APIS，但它們非常煩人，乏味，而且通常很難編寫代碼 - 所以不要讓每個Web開發人員編寫相同的繁瑣代碼，例如下載和進程和JSON文件，您可以改為下載jQuery庫并使用jQuery的漂亮API。