前端學習之路及前端架構的演進一些思考
最近這些年前端發展十分迅猛，各種框架，插件，組件庫如雨後春筍，讓人應接不暇。很多剛進去前端開發的同學可能會眼花繚亂，不知從何入手。這篇文章主要講下我自身前端學習之路，以及項目中前端架構的演進過程中的一些知識點。
和大多數人一樣，學習過程是曲折的，這裏寫出來，給有過相似困惑的人一些參考。
廢話不多，現在就開始，我將學習劃分了5個階段，懵懂、初識、入門、深入和高級。
懵懂
剛開始工作那會，被分配到了前端開發組，找了一些教程學習html，js，css這三塊內容，掌握了基礎知識後，開始寫一些靜態頁面，開始使用ajax請求後臺數據渲染頁面,也開始了前端的開發之路。
技術棧： HTML， JS， CSS
初識
經過一段時間的入職培訓後，進入項目組，開始開發實際功能。很多時候爲了實現某個功能花費很長時間，浪費時間不說，而且經常bug不斷。開始找現成的方案來解決項目問題，於是開始學習UI框架或js庫等等，例如Jquery，Bootstrap。
技術棧： SpringBoot/SpringMVC + js類庫（Jquery，echarts等）+ UI組件庫（Bootstrap等）
入門
隨着功能的擴展，項目變得越來越大，各種JS、css文件體積越來越大，越來越不可控，頁面加載速度越來越慢，而且會有一些兼容性的考慮。這個時候開始考慮優化，同時考慮如何管理前端文件。
所以就開始考慮如何構建前端工程，至此引入了node，npm和webapck。（當然構建前端工程還有其它選擇，這個只是引子。）,同時爲了實現各類功能，引入了各種包（了babel，polyfill）
這個時候前端項目算是從Spring工程中獨立出來了，前後臺人員也逐漸分離。
技術棧：
構建前端項目：webpack，npm
代理或數據模擬： node，express
後端：SpringBoot，mysql,mybatis/JPA等等
前後端分離後，我們經常開發時，很多ajax請求數據需要模擬，可以用node+express搭建一個簡單的後臺服務，也可以用一些js插件mock數據。
深入
這個時候雖然前端項目獨立了，但項目中的很多頁面中的代碼相似，代碼的複用率不高，覺得有必要進行組件化，把具有共性的東西抽象出來，提高效率。
這個時候開始決定採用框架進行開發。開始糾結選擇哪個框架，Vue，React或是Angular等等，後來決定用了Vue(現在看來選擇哪個框架沒那麼大區別，不同框架提供的功能是相似的)。這個時候，頁面開始分解爲各個組件，公共的東西出來了，開發效率也提高了。
技術棧：webpack ， vue
高級
經過一段時間，問題又出來了，不同項目間其實有很多共同的東西，項目間代目複製也挺麻煩，這個時候需要抽象出常用的組件庫，新項目需要使用組件，直接使用npm安裝即可。
這個時候就有兩個問題了：
1、npm安裝的組件庫放在哪？
npm可以安裝npm倉庫上的包，git倉庫的包。於是就有了一下選擇：
a、將公司的私有代碼放在npm倉庫上。這肯定不可以，npm包可以控制權限也不行，所以這個方案不行。
b、代碼放到公司的私有git倉庫上，這個是可以的。
2、組件庫如何開發？
現在是採用vue框架開發，自然想到組件庫以vue爲基礎。
vue提供了比較完善的插件機制，開發插件的教程地址： https://cn.vuejs.org/v2/guide/plugins.html 。
我搭建了一個Vue組件庫工程demo，類似element-ui。
git地址： https://github.com/xubaodian/Wstl-UI.git
工程目錄如下：
解釋一下：
config文件夾下是webpack配置:
webpack.dev.js:啓動example的webpack配置，example用來測試組件
webpack.prod.js:生成example的生產環境文件的webpack配置
webpack.common.js:打包組件庫的webpack配置，所有組件生成一個js文件和一個css文件
webpack.component.js:分開打包組件的webpack配置，每個組件生成一個js文件和一個css文件
具體實現可參考代碼，代碼中有註釋。