前端的小夥伴應該能夠很明顯地感覺到，在面試過程中，各大公司面試官已經非常注重前端工程化能力的考察了。
前端工程化的演進可以極大地提升開發效率。前端發展到現在，社區湧現出大量的優秀框架和工具，得以將前端工程師從繁重的工作中解脫出來。比如，同樣地給一個 dom 元素綁定一個 click 事件，使用 Vue 就會比 JS 更簡單清晰。
我相信每個踏入前端這個行業的同學都是有着一顆熱愛學習的心。因爲前端這個行業不如後端那麼成熟穩定，所以一直是在高速地推陳出新，每年都會有新的框架出來。但每個人的精力又是有限的，每個人都希望投入有限的精力的情況下，能學到最有價值的東西。所以我一直在想能否將這些年前端在工程化方面的優秀成果濃縮到一個課程中。感興趣的同學可以瞭解下 ?《透視前端工程化》
結合自己的經歷總結了一些在前端學習上的方法，希望對大家有所幫助：
- 夯實自己的基礎能力。HTML、CSS、JS這三個前端必備的技術是必須要精通的，不能做了幾年前端了連CSS佈局、異步編程這些基本的東西還模糊不清。
- 抓主要矛盾，打造核心競爭力。每個人的精力有限，我們應該挑選一個感興趣的方向往深裏去鑽研。而不是企圖將所有的方向都做到最好。
- 工作中多思考總結。很多人吐槽自己一直疲於做做業務需求，沒有機會做技術項目，得不到提高。其實在業務中也能做到能力的提升。在做業務的時候，完全可以將自己平時的新想法，接觸到的新技術付諸實踐。另外，做完項目後做一個覆盤，總結自己遇到的問題和解決方案。久而久之，你會發現自己在業務中也能很好地得到成長。
- 多與別人交流。現在互聯網技術講究開源，我們的心態更要open，應該互相學習對方的優點，內化爲自己的東西，讓自己得到快速提升。
- 時刻關注社區技術動態。前端的新東西層出不窮，不一定什麼東西都去學，但要掌握行業動態，知道大家都在玩什麼技術，跟上行業的腳步。
我是誰？
我是王超，現任快狗打車（原58速運）前端負責人，從 0 到 1 組建了快狗前端團隊，負責團隊技術體系的搭建，形成了以 Webpack 和 Vue 爲基礎、 Node.js 中間層爲補充的，自動化、工程化、組件化的快狗前端技術體系。
曾任職於人人網、奇虎360、58，有 8 年知名互聯網工作經驗。
這次主要是想和大家聊聊從切圖仔到前端 Leader，究竟是如何實現的個人成長？
聯合推薦：沈劍 快狗打車CTO、王海旭 58大前端團隊創始人、馮陽 58到家平臺前端負責人
我的工作經歷
時間如白駒過隙，轉眼已經在前端這個行業已經七八年的光景了。非計算機專業出身的我從事前端這個行業，確實經歷了很多的挫折，走了很多彎路。
但現在回首自己的職業經歷，每一份經歷都有不一樣的收穫。
畢業生，第一份工作千萬不能選錯
我畢業後第一份工作是在一家廣告聯盟公司做 flash 廣告設計和平面設計。當初選擇這份工作自己根本就沒經過仔細的考慮。
由於公司很小，在 flash 開發設計這個崗位上就我一個人，身邊沒有有經驗的人可以學習。隨着 Web2.0 時代的到來，Flash 技術也在走下坡路了，我的 flash 之路是條死路。
後來公司來了一個做前端的同事，工作中與之不斷交流中漸漸瞭解了前端開發，flash 技術未來一定會被前端的技術所取代。這纔將自己的精力投入到了前端的學習上，慢慢也能做一些簡單的前端工作了。
現在來看，雖然自己最終找到了一個正確的航道。但如果在選擇工作的時候就經過仔細調研，能讓自己少走很多彎路。
平臺對新人很重要，好的平臺會讓新人有很好的成長起點，具備良好的視野。而且在平臺衆多有經驗的老人的提攜下，新人成長的會很快，能爲以後的職業發展奠定一個良好的基礎。
「人人網」時期，見證 PC Web 到 移動 Web 的跨越
當時的前端處於從 PC Web 開發向移動 Web 開發過渡的時期。在這裏的兩年多，無論是 PC 上的開發還是移動上的開發都做了很多，比如 PC 各種瀏覽器廠商的兼容問題，移動端上各種機型的適配問題，使用 CSS3 實現各種新特性。
此時前端領域正在發生快速的變化，像 Angular、React 等現代前端框架已經開始出現。而這邊依舊是使用傳統的原生 JS、jQuery 重複性地完成項目，自己的技術也進入了一個瓶頸期。
面對自己的技術瓶頸，我想到的是換個環境來逼迫自己跳出舒適區，突破技術瓶頸。
但是，這裏我想多說一句，一定不要爲了跳槽而跳槽。
跳槽之前要問自己一句，我在這裏是不是已經該學的都學會了？如果答案是肯定的，那就早點行動，否則就踏踏實實地繼續沉澱提高。
「360」時期，越痛苦提升越快
360 這邊的技術體系很完善，前後端分離開發、前端部署平臺化、上線前代碼自動 diff，新技術的應用、定期的技術交流。
入職之初我做項目很喫力，因爲從開發框架 Backbone、React 到構建工具 Webpack，再到開發方式使用 Linux 開發機，所有的東西都是新的，感覺哪哪都不會。
我足足用了半年的時間，直到和同事一起使用 React 重構 360 地圖，才完全熟悉和適應。但讓我無比痛苦的半年恰恰是自己提升最快的時候。
談到這裏我想說一下是如何一步步提升自己的。
第一是獨立思考解決方案。遇到了問題我通常是自己去網上去找解決方案，實在解決不了了，再去找自己的同事和 leader 尋求幫助。
第二看比自己能力強的同事的代碼。從他們的代碼中，可以借鑑到很多好的設計方式和編程習慣，日積月累變成自己的東西。
第三多與同事進行技術交流。通過與他們的交流，可以很好地開闊自己的視野，彌補自己不知道的知識。這裏特別感謝一下我的老朋友司望利，從他的身上學到了很多。
「快狗」的挑戰，建設前端工程體系
快狗這邊的早期的前端開發方式比較原始。擔任快狗前端負責人後，我開始着手推進前端工程化。首先就是升級技術棧，並進行前後端分離。陸續建設了前端部署平臺、組件庫、腳手架、以及性能監控平臺逐漸形成了完善的前端技術體系。
做爲團隊負責人如何從無到有搭建技術體系，這裏分享一下我的經驗。
新晉技術負責人從技術思維向管理思維轉變。很多技術人在成爲團隊管理者後，還是習慣什麼事情都自己搞，一方面擔心別人做不好，另一方面擔心自己的技術優勢會慢慢喪失。別人不會做，你可以進行指導，但不能千萬自己替他做，因爲你的精力是有限的。另一個擔心更不可取了，你雖然不再深入技術細節，但在知識的技術廣度、技術視野上會有更大的提高。
技術體系建設要以解決業務痛點爲目的。任何的技術工具和平臺建設都不能脫離這個目的，不能僅僅爲了試用一下某項技術或者好玩就去搞。否則很可能是白白浪費了研發成本，缺很難在團隊中推廣使用，無法產生價值。
技術體系建設要充分討論後再實施。方案的設計討論清楚了，才能避免將來各種問題的出現。我們在建設前端部署平臺的時候就有過深刻的教訓。
由於前期方案考慮不周，後期平臺經歷一次大的調整，使用老平臺部署的項目用了半年的時間才完成遷移，成本很高。
建議將 70% 的時間用在方案設計和討論上，30% 時間用在工具和平臺的研發上。
爲什麼大公司現在這麼重視前端工程化？
從事前端開發這個職業有七八年的時間了，既經歷過工程化程度極低的開發方式，也見證了這幾年前端領域工程化水平的大幅提升。導致前端工程化水平大幅提升的原因，大致有二：
一方面是由於大公司本身業務複雜，相應的前端工程化程度高，配套的基礎設施很成熟，對人員的要求自然很高。
另一方面，現在的前端開發都是在一些先進的工程化工具基礎之上，比如 React、Vue、Sass、Webpack 等。只有具備良好的工程化能力，才能更好地應對日益複雜的開發任務，才能更容易進入大公司。
課程設計
前端工程化是個比較大的話題，涵蓋的知識很多。大篇幅的講述理論知識又是很枯燥的，而且效果不好。
所以在課程設計上，我是以動手實現一個前端腳手架工具爲主線，過程中引出實現某個功能的思路和用到的工具，並一一講解。
例如，爲了把規範開發者的代碼，我們在腳手架中需要引入代碼檢查工具eslint和stylelint，並對兩者的使用進行了講解。
又比如，在搭建本地開發環境可能有多種實現方式，比如自己單獨寫一個靜態服務器來實現或者使用 webpack-dev-server 和 webpack-dev-middleware 進行來實現，我們着重對後者進行了詳細介紹。
讀者在課程結束後，不但可以系統學習了前端工程化的工具和知識，還可以完成一個實用的腳手架工具。
課程特色
實操驅動，溝通前端知識
實際操作腳手架搭建，溝通起流程規範、開發、聯調、測試、構建、部署各個環節知識
實用性強，直接落地業務
課程內容基於團隊的實際工程化經驗，可以把課程所學直接應用到業務開發中
你能學到什麼
- 對前端工程化有一個系統認知；
- 能獨立設計一套前端工程化解決方案；
- 知識廣度上有大幅提升；
- 進入更好的平臺，獲得更好的薪酬。
最後，希望每一個前端人都能通過努力來完成自己的人生進階道路，加油！
目錄
第一部分：模板設計
第01課：模板功能設計
第02課：Webpack 基本介紹
第03課：搭建項目模板框架
第04課：前端模塊化解決方案
第05課：搭建本地開發環境
第06課：搭建本地 Mock 服務
第07課：引入代碼檢查工具
第08課：自動生成雪碧圖
第09課：根據瀏覽器構建
第10課：根據環境構建
第11課：集成移動端調試工具
第12課：引入單元測試
第13課：引入 e2e 測試
第14課：Webpack 構建性能優化
第15課：添加部署功能
第16課：聚合項目配置並模板化
第二部分：命令行設計