前端開發是一個龐大的體系，紛雜的知識點鑄成了一張信息密度極高的圖譜。通過下面這張選自《Front-end Developer Handbook 2019》中的“前端技術學習路線圖”，你可以清楚地看見前端開發的全貌。

前端技術學習路線圖（來源：https://github.com/kamranahmedse/developer-roadmap）

在開發中，一行代碼就可能觸發宿主引擎的性能瓶頸；團隊中的代碼量幾何級數式增長，可能就愈發尾大不掉，掣肘業務的發展。這些技術環節，或宏觀或微觀，都與工程化基建、架構設計息息相關。

如何打造一個順滑的工程化流程，為研發效率不斷助力？如何建設一個穩定可靠的基礎設施，為業務產出保駕護航？這些問題我在多年的工作中反復思考，不斷結合實踐，如今也有一些經驗和感悟。

但事實上，讓我將這些積累幻化成文字是需要一個契機的，我先從做這個專欄的初心，以及專欄內容涉及的技術談起。

求賢若渴的伯樂和鳳毛麟角的人才
作為團隊管理者，一直以來我都被人才招聘所困擾。經歷了數百場面試，我看到了太多千篇一律的“皮囊”：

  • 「我精通 Vue.js，看過 Vue.js 源碼」=== 「我能熟記Object.defineProperty/ Proxy，也知道發布訂閱模式」

  • 「我精通 AST」===「我知道 AST 是抽象語法樹，知道能用它做些什么」

  • 「我熟練使用并了解 Babel」===「我能記清楚很多 Babel 配置項，甚至默寫出 Babel Plugin 模板代碼」

當知識技術成為應試八股文，人才招聘就淪為“面試造火箭，工作擰螺絲”的逢場作戲。對于上述問題，我不禁多問：

  • 「你知道 Vue.js 完整版和運行時版本的區別嗎？」

如果你不理解「Vue.runtime.js 運行時版本不包含模板編譯器」，就大概率無法說清 Vue 在模板編譯環節具體做了什么。如果只知道幾個 APIs 實現數據劫持和發布訂閱模式，又何談精通原理？

  • 「請你手寫一個“匹配有效括號”算法？」

如果連 LeetCode 上 easy 難度的編譯原理相關算法題都無法做出，那么何談分詞、AST 這些概念？

  • 「如何設計一個 C 端 Polyfill 方案？」

如果不清楚@babel/preset-env的useBuiltIns不同配置背后的設計理念，又何談了解 Babel，更別說設計一個性能更好的降級方案。

另一方面，我很理解求職者也面臨困惑：

  • 我該如何避免相似的工作做三年，而不是具備了三年的工作經驗？

  • 我該如何從繁雜且千篇一律的業務需求中抽身出來，有時間總結提高自己？

  • 我該如何為團隊帶來更大的價值，體現經驗能力？

為了破局，焦慮的開發者漸漸成為“短期速成知識”的收集者。你以為收藏的是知識，其實收藏的是“知道”，你以為掌握了知識，其實只是囤積了一堆“知道”。

于是，近些年我也一直在思考：“如何抽象出真正有價值的開發知識”，“如何發現并解決技術成長瓶頸，培養人才”。因此，我將自己在海外和 BAT 服務多年積累的經驗分享給大家，把長時間以來我認為最有價值的信息系統性整理輸出——這正是我做這個專欄的初心。

從前端工程化基建和架構設計的價值談起
從當前招聘情況和開發社區的現象上看，短平快、碎片化的內容（比如快速搞定“面經題目”）很容易演變成跳槽加薪的興奮劑，但是在某種程度上它只能成為緩解焦慮的精神鴉片。

試想，如果你資質平平，又缺少團隊中“大牛”的指點，工作內容就是在已有項目中寫幾個頁面或運營活動，如此往復技術無法提高，三四年后和應屆校招生也許并無差別。

這種情況出現的主要原因還是大部分開發者無法接觸到好項目。這里的“好項目”是指：從 0 到 1 打造應用的基礎建設、制定應用的工程化方案、實現應用的構建和發布流程、設計應用中公共方法和底層架構。系統性地研究這些知識，才能真正打通開發者“任督二脈”，實現個人和團隊更大的價值。

我把這樣的內容總結定義為：前端工程化基建和架構設計。

它是每位開發者成長道路上的稀缺資源。一輪又一輪的業務需求是煩瑣而機械的，工程化基建和架構設計卻是萬丈高樓的根基，是巨型航母的引擎和發動機，是區分一般開發者和一流架構師的分水嶺。因此，前端工程化基建和架構設計的價值對于個人、對于業務，更是不言而喻。

我理解的“前端工程化基建和架構設計”
我們知道，前端目前處在前所未有的地位高度：前端職位既收獲著快速發展，也迎接著批量劣汰；前端技術有著與生俱來的混亂，也有著與之抗衡的規范。這都對前端工程化和基礎建設提出了更高的挑戰，對技術架構設計能力提出了更高的要求。

對于業務來說，在工程化基建當中：

  • 團隊并非一個人單打獨斗，那么如何設計工作流程，如何打造一個眾人皆贊的項目根基？

  • 項目依賴紛繁復雜，如何做好依賴管理和公共庫管理？

  • 如何深入理解框架，真正做到框架的精通和技術選型的準確拿捏？

  • 從最基本的網絡請求庫說起，如何設計一個穩定靈活的多端 Fetch 庫？

  • 如何借力 Low Code / No Code 技術，實現越來越智能的應用搭建方案？

  • 如何統一中后臺項目架構，實現跨業務線的產研效率提升？

  • 如何開發設計一套適合業務的組件庫，封裝分層樣式，最大限度做到復用，提升開發效率？

  • 如何制定跨端方案，Write Once，Run Everywhere 是否真的可行？

  • 如何處理各種模塊化規范，以及精確做到代碼拆分的最佳實踐？

  • 如何區分開發邊界，比如前端如何更好地利用 Node.js 方案開疆擴土？

這都直接決定了前端的業務價值，體現了前端團隊的技術能力。

那具體什么是我心中的“前端架構設計和工程化建設”呢？

我以身邊常見的一些小細節作為例子：不管是菜鳥還是經驗豐富的開發者，都有過被配置文件搞到焦頭爛額的時候，一不小心就引起了命令行報錯，編譯不通過，終端上幾行英文字母鋪滿 warning / error。

也許你可以通過搜索引擎找到臨時解決方案，匆匆忙忙又重新回到業務開發中追趕工期。但報錯的本源到底是什么，究竟什么是真正高效的解決方案？如果不深入探究，你很快還會因為類似的情況浪費大把時間，同時技術能力毫無提升。

再試想，對于開發時遇見的一些詭異問題，你也許刪除一次node_moudles，并重新執行npm install，然后發現“重啟大法”有時候真能奇跡般地解決問題。可是你對其中原理卻鮮有探究，也不清楚這是否是一種優雅的解決方案。

又或者，為了實現一個通用功能（也許就是為了找到一個函數的參數用法），你不得不翻看項目中“屎山代碼”，浪費了大把時間。可是面對歷史代碼，你卻完全不敢重構，日積月累“歷史”逐漸成為“天坑”，“屎山代碼”成為業務桎梏。

基于多年對一線開發的觀察，以及對人才成長的思考，我心中的“前端工程化基建和架構設計”不是簡單的思維模式輸出，不是純粹陽春白雪的理論，也不是社區搜索即得的 Webpack 配置羅列和原理復述。而是從項目中的痛點提取基礎建設的意義，從個人發展瓶頸總結工程化架構和底層設計，于是這門課程的內容呼之欲出。

如何學習前端工程化基建和架構設計？
事實上，前端工程化基建和架構設計相關話題在網上的內容少之又少。我幾乎翻遍社區上所有的相關聯課程，它們更多是對 Webpack 的配置講解、相關源碼的復制粘貼，或 npm 基礎用法的列舉等。

我一直在思考，什么樣的內容能夠幫助讀者突破“會用”的層面，能從更高的角度看待問題。在本課程中，我主要從以下幾個方向展開講解：

  • 前端工程化管理工具

  • 現代化前端開發和架構生態

  • 核心框架原理與代碼設計模式

  • 前端架構設計實戰

  • 前端全鏈路——Node.js 全棧開發

在第一部分前端工程化管理工具中，我會以 npm 和 Yarn 包管理工具切入工程化主題，以 Webpack 和 Vite 構建工具加深讀者對工程化的理解。事實上，工具的背后是原理，因此我并不會枯燥地枚舉某項工具的優缺點和基本使用方式，而是深入幾項極具代表性的技術原理和演變，我認為只有吃透這些內容，才能真正理解工程化架構和工具選型。希望通過第一部分，你能夠感知到如何刨根問底地學習，如何像一名架構師一樣思考。

在第二部分現代化前端開發和架構生態中，我將一網打盡那些大部分開發者每天都會接觸到，但很少真正理解的知識點。希望通過第二部分，你能夠真正意識到：Webpack 工程師并不是寫寫配置文件那么簡單，Babel 生態體系也不是使用 AST 技術玩轉編譯原理而已。這部分內容能夠幫助你培養前端工程化和基礎建設的整體思想，這些知識也是設計一個公共庫、主導一項技術方案的基礎。

第三部分我們一起來體驗經典代碼，設計模式和數據結構的藝術。通過再學習經典思想和剖析源碼內容，相信你能夠有新的收獲。

在第四部分架構實戰搭建中，我會一步一步帶領大家從 0 到 1 實現一個完整的應用項目或公共庫。這些工程實踐并不是社區上泛濫的 Todo MVC，而是代表先進設計理念的現代化工程架構項目（比如設計實現前端 + 移動端離線包方案等）。同時在這個環節，我也會對編譯和構建、部署和發布這一熱門話題進行重點討論。

最后一部分，我們以實戰的方式，靈活運用并實踐 Node.js。這一部分不會講解 Node.js 的基礎內容，這也就需要你先儲備相關知識。我們的重點會放在 Node.js 的應用層面和建設發展話題上，比如我會帶你設計并完成一個真正意義上的企業級網關，其中涉及網絡知識、Node.js 理論知識、權限和代理知識等，這會是對前端開發能力的綜合培養；再比如我會帶你研究并實現一個完善可靠的 Node.js 服務系統，它可能涉及異步消息隊列、數據存儲，以及相關微服務等傳統后端知識， 讓你能夠真正在團隊中落地 Node.js 技術，不斷開疆擴土。

總之，這門課程內容很多，干貨滿滿。

客觀來說，我絕不相信一本“武功秘籍”就能讓每個人一路打怪升級、一步登天。但我更想把這個專欄當作一個和你交流的機會，輸出自己經驗積累的同時，能幫助到每一個人。你準備好了嗎？來和我一起，像架構師一樣思考。