小白也能聽懂的前端工程化

前端工程化最近也是被不少公司或者企業都用起來了，變成了一個很火的名詞，因此我就好奇一下中間的來龍去脈是怎麼樣的

01 前言

---

前端工程化這個方面的內容我也是近年來才聽到的一個信息，我一聽就以爲十分地高大上，何時前端開始變成了一個工程化的層面了？不過如今隨着技術的更新換代我逐漸相信前端的發展了。以前以爲驚訝的時候，我仍是你們認爲前端該乾的事情——切圖，套模板。

本文就和你們扯一下前端工程化的前世此生，沒有技術在裏面。你們能夠帶着好奇的心情閱讀。

02 前端開發？切圖？

其實以前對於前端的概念基本上是沒有的，那時候不少招的就是後端的開發，因此java的開發就很吃香了，差很少站到了鄙視鏈的頂端。那爲何我不去學後端呢？由於我（後）相（端）信（太）前（難）端（了）的發展。

因此沒辦法，我就隨便找個其餘的學一下，因爲美工很差那就找前端吧！有點東西還能夠立刻出效果。

前端歷史

不得不認可的是，如今前端經歷了兩次的重生。纔有今天日新月異的發展，第一次是從靜態網站變成了動態網站；第二次就是Node.js的推出，可使腳本語言JavaScript運行在服務器端，這但是解放了生產力，讓前端再也不卑微了。

不少人都以爲動態網站不是很早就有了嗎？一開始我也是這麼以爲的，畢竟寫一個腳本就可讓頁面動起來，可是這裏說的動態可不是這個意思，是能夠與用戶進行交互了。你們能夠想一想看以前的前端歷史，無非就是把幾個頁面模板拼湊起來，而後使用js加上幾個動畫，就會以爲你的網站不得了了。那時候的網站基本上是沒有交互的，就是給別人看的頁面，僅此而已。

有時候你辛苦調試出來的一個完美的頁面，發給同窗朋友看的時候，頁面也可能會亂。沒錯，那個就是不兼容的時代，會讓每個前端抓狂的時代，而如今就不同了，不少框架都幫你弄好了，不多會有兼容的問題。

開發模式

因爲本人是沒有經歷過先後端混合的開發模式，我開始學習前端的時候，vue和elementui這些都已經出來了，因此我就跟高興晚出生了幾年，讓前人們幫咱們這羣人鋪平了前端道路。

當我谷歌了前端工程化了以後，發現以前的開始模式是比較混亂的，也是沒有很強的邏輯在裏面的。大概的開發模式就是切一下圖，把設計的部分作了和寫一下腳本（相信你們都知道dreamweaver這個軟件，既可網頁設計也能寫前端代碼）。而後頁面模板就交給後端來作，先後端混合在一塊兒，耦合性很是高。這真的就是牽一髮而動全身的局面。相信你們都知道大名鼎鼎的JSP了，我在大學的時候也學了這個，基本上沒什麼用（下一屆取消這門課程）。

後來後端就忍不住了，你這前端的東西啥玩意，零碎的很，又毫無邏輯可言。

好吧，前端本着背鍋的心態啃了這塊骨頭，把全部頁面相關的東西都給了前端，後端就負責發給我數據就行了。這就是上面提到的動態網站的開始，這得益於Ajax的誕生。今後之後前端的工做就不用去切圖了，你的工做就變成了怎麼搞模板，設計與美化頁面的工做了。

03 前端工程化

---

以前咱們開發完了頁面以後，剩下的就等後端來給你數據了。可是你前端的開發快了，可是後端的接口跟不上啊，這可怎麼辦？聰明的前端就想出了「假數據」這個東西，就是我先把數據本身模擬出來，你後端就必須按照個人格式給我返回數據（與後端溝通好格式）。

這不，出了不少數據模擬的工具，好比easymock等。你們能夠脫離後端的控制單飛了，咱們能夠把這個項目同步進行開發，每個過程都是完整可交付的狀態，能夠隨時給客戶演示這個過程而不用等後端的接口。項目組一看，前端作的不錯（升職加薪）。可是這和工程化的概念還很遠呢，咱們知道項目大概能夠分紅四部分：設計，開發，測試，部署。

設計

這裏的設計主要是由產品經理與UI設計一塊兒，設計這款產品的願景以及要實現的功能，簡單一點就是把用戶需求的功能經過產品設計出來，交給開發。

前端就主要經過產品頁面的評估，主要是評估開發週期以及項目的難度，而後是技術棧的選擇。後端會對系統進行架構設計，包括系統接口，權限控制，性能，可維護可複用等的設計。基本上先後端設計的都是關於技術類型的。

開發

接下來就會進行開發的狀態，根據需求進行開發。這個階段就要注意一些小功能的開發，是否能夠經過全部的測試用例。不知道你們是否聽過敏捷開發的技術，這是一種高效的模式，確保開發的過程當中每一個部分的功能均可以使用。他的初衷就是可以高效地開發迭代，快速地轉變用戶需求。前端的組件化、模塊化的設計就是可以保證敏捷開發的前提。

測試

測試的做用就是進行小範圍的對功能自己的驗證，通常來講會有不少測試用例，只有你經過了全部的用例測試以後就能夠進行下一部的操做。測試是直接面向用戶的，這時候就站在用戶的角度去體驗這個產品，把用戶可能出現的操做都測試一遍看服務或者數據是否正常，前端工程師是主要責任人。一般可能還會包含壓力測試等，用來測試產品的性能，這時候就是後端的主要責任。

部署

部署的流程就是一個很重要的一部分，假如前期的工做作得不夠好，項目上線以後可能會遇到不少問題，讓你難以定位問題出在哪，項目難以維護等。先後端分離的開發模式能夠有效的減小故障的發生，可以快速定位問題，解決問題。其實這裏也是得益於單元測試以及項目工程拆分的過程。

這裏的部署能夠把一些靜態的文件部署到靜態服務器或者CDN，把涉及數據交互的放在web服務器，作到相似「讀寫分離」的功能，可以最大程度提高性能。

在開發的過程當中就可使用先後端分離的開發模式，這是一種與技術無關的模式，就是一種工程思惟的考量。不少面試都會問你談談前端工程化的理解，其實無非就是爲何有前端工程化、怎麼作才能夠、有什麼好處等。基本上這就是一種工程的思惟，與技術的關係不大。總的來講有如下三個優勢：

• 並行開發，縮短開發週期
• 快速定位問題，迅速解決問題
• 部署能夠動靜分離，簡化流程，提高程序的健壯性

04 小結

---

其實我發現一些書籍把前端工程化的概念講的很深，好比可能會說前端的打包工具、持續集成等。固然這也是前端工程化的一部分，簡單來講它的核心就是「解耦」，讓以前的糾結不清的脈絡從新整理出來，變成一個可維護可複用的狀態。

總結一下前端工程化就是爲了簡化開發流程，並行開發，互不影響且可以方便合併整個項目。核心目標就是創建一種開發環境，提高總體的開發效率。

做者：前端小時
連接：https://juejin.im/post/5e74b6... 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。