小冊上新 | 從 0 到 1 落地前端工程化！

---

theme: Chinese-red

近些年來，隨著前端專案複雜度的不斷提高，前端工程化被越來越多的公司與開發者所重視。

從業務層面來說，前端工程化儼然已成為一線網際網路前端團隊的標配，稍具規模的團隊都會根據自身業務設計出一套符合當前業務需求的前端架構。對前端開發者來說，前端工程化已逐漸成為初、中級前端與資深前端的分界線。例如很多大廠的初、中級前端只負責編寫業務程式碼，而資深前端則會使用前端工程化，去接觸更高層次的前端架構設計，向技術管理崗晉升。

這也是為什麼很多前端開發者已經熟練使用react/vue/next/nust/webpack/koa等前端框架，但升職加薪依然遙不可及。因此前端開發者想要突破工作侷限性，實現跳躍式漲薪，掌握前端工程化必不可少！

前端工程化是什麼

說了這麼多，前端工程化到底是什麼呢？前端工程化是指使用軟體工程的技術與方法對前端開發的技術、工具、流程、經驗、方案等指標標準化，它具備模組化、元件化、規範化、自動化四大特性，主要作用就是降低成本與提升效率。

• 模組化是前端工程化的重中之重，它在前端工程化上的表現就是在檔案層面上拆分、組裝程式碼與資源，具體來說就是將一個大檔案拆分為相互依賴的小檔案，再統一拼裝與載入。

• 元件化是前端工程化的重要基礎，著重在功能層面上拆分、組裝互動與設計， 具體來說就是將一個具備通用功能的互動設計劃分為模板、樣式和邏輯組成的功能單元，實現程式碼高效複用，提升開發效率。

• 規範化是前端工程化的重要部分，主要作用是將鬆散的規範通過指定標準凝聚在一起，將所有工作流程標準化，協同所有開發者以標準化的方式去定義工作流程，每一個成熟的前端團隊都有一套身經百戰的規範化方案。

• 自動化指將一系列繁瑣重複的工程工序交由程式根據預設指令碼自動處理，整個工作流程無需人工參與，解放開發者雙手讓其更專注業務需求的開發。

很多同學在不瞭解前端工程化前，遇到以下情況經常不知所措：

• 構建配置、打包配置、公共元件、工具函式等程式碼片段，每次新開專案都要複製貼上；

• 團隊成員的編碼風格大相徑庭，導致從倉庫拉取下來的程式碼執行起來令控制檯一片紅；

• 團隊協作的規範、環境、模組、倉庫和文件，太多基建措施導致團隊新成員無從入手；

• 隨著需求迭代引起專案結構與工程檔案不斷變化，處理不當讓專案直接走向重構道路。

事實上，只要將前端工程化的開發思維與解決方案應用到專案中，利用好它的優勢，就能輕鬆實現這些需求，為業務降本增效。

總之，前端工程化不是某個具體的工具，而是對專案的整體架構與整體規劃，使我們能在未來可判時間內動態規劃專案的發展走向，以提升整個專案對使用者的服務週期。學習前端工程化不僅能理解清楚一個專案的完整流程，遇到困難也能在複雜的流程中快速定位並解決問題，還能根據自身知識儲備制定一些可擴充套件流程或預見專案的未來發展方向。

如何系統學習前端工程化？

但是，想要系統學習前端工程化不是一件容易的事情。看到這，有些同學可能會說：“前端工程化不就是封裝元件庫嗎？那我也會前端工程化！”

前端工程化可不知識會封裝元件庫就可以了。首先，我們要有明確前後端分離的任務能力。簡而言之，就是要能一眼看出該任務屬於前端還是後端，劃分好前後端的職責更利於前端工程化的接入。這也是基於前端工程化解決問題的基礎。其次，我們要掌握前端工程化的四大核心特性，模組化、元件化、規範化和自動化。知道它們是怎麼實現的，它們各自的標準是什麼，因為所有前端工作流程都離不開這些核心內容，

雖然很多社群也都有前端工程化相關文章教程，但它們只針對前端工程化的某個技能，零零星星的知識點與斷層式的學習很難充分實踐前端工程化。

作為一名網易的資深前端工程師，近三年來，JowayYoung 一直在前端工程化領域實踐，利用工程架構的知識重構了眾多專案，包括但不限於伺服器、腳手架、元件庫、工具庫、多包倉庫、私有倉庫、服務部署、文件系統、監控系統、CI/CD和可移植容器等。有了這些前端工程化技術的加持， JowayYoung 負責的專案也從手動處理流程全部替換為自動處理流程，以解放團隊雙手，讓其他成員更專注於自身業務需求。

基於此，JowayYoung 將這些經驗總結了下來，希望能在這本小冊中與你分享。為了讓前端工程化小冊適合更多開發者，JowayYoung 會以小白的身份，與你一起深入工程的各個環節，帶你走完前端工程化落地的全過程。

具體來說，小冊主要分為 6 大模組。

• 規範篇：熟悉模組/程式碼/提交三大開發階段規範，通過規範約束自己，保障工作質量與提升開發效率。
• 服務篇：熟悉雲伺服器/域名系統/站伺服器部署服務環境，掌握整體部署與工具配置，學會獨立上線網站與應用。
• 環境篇：熟悉Node/Nvm/Npm部署開發環境，獨立搭建一個介面服務，實踐環境/映象/資料/程序四種Node應用方式。
• 構建篇：熟悉構建工具打包類庫模組，獨立封裝一個類庫模組，結合測試用例保障程式碼的生產質量。
• 組織篇：熟悉Monorepo模式管理多包倉庫，獨立維護一個多包倉庫，結合Npm Scope釋出模組到公共倉庫。
• 部署篇：熟悉自動化工具部署前端專案，獨立打造一個私有倉庫與文件站點，結合CICD在提交程式碼時自動部署到公網。

總之，在學習具體技能的同時我們要重視工程化的解決思路，靈活運用它對我們的工作能力與自身競爭力都會有很大的提升。

小冊正值上新特惠期，限時 6 折~

僅需 ￥17.94 就能落地前端工程化，告別紙上談兵！

還等什麼，快來加入學習吧！