我們正處在一個技術大爆發(fā)時代可很，IT技術作為與人們生活息息相關的領域诗力，得到了飛速發(fā)展。前端技術我抠，又是所有IT技術中苇本，更新最快的領域之一，考慮到前端社區(qū)“激進 ”的創(chuàng)新風氣菜拓，似乎也可以把“之一 ”去掉瓣窄。
1、八一八前端的歷史
在筆者看來纳鼎，從技術上進行劃分前端大概經(jīng)歷了這幾個階段：
圖文信息展示階段：這是前端技術的公元前康栈，主要是為了展示信息給受眾，網(wǎng)站幾乎沒有什么交互功能
DHTML時代：DHTML讓網(wǎng)頁具有了更豐富的展示手段喷橙，頁面能夠對人們行為產(chǎn)生更多的反饋，具備了更好的交互性登舞，大名鼎鼎的web2.0就是處于這個階段
前端工程化時代：隨著頁面功能的豐富贰逾，前端部分的代碼逐漸變得龐大，代碼維護和復用菠秒，成了前端技術發(fā)展的主旋律疙剑。在這個時代，前端技術得到了空前的發(fā)展：語言特性得到加強践叠，新的標準緊鑼密鼓的出爐(HTML5言缤，CSS3，ES2015 and ES7 is coming~)禁灼；各種類庫層出不窮管挟，各種思想百花齊放；更多的問題被嘗試用前端技術解決弄捕，前端技術被用于完成更多領域的任務僻孝，這是前端的黃金時代
前端技術的每一次變革导帝，引領著人類信息生活的變革。門戶網(wǎng)站穿铆，讓我們能夠隨時獲取最新的咨詢您单；Youtube、twitter荞雏、微博虐秦，讓普通人能夠發(fā)出自己的聲音，被世界聆聽凤优；能夠運行在多平臺上的web語言悦陋，快速的開發(fā)效率，極大的減小了我們表達自己思想的代價别洪，創(chuàng)業(yè)叨恨、創(chuàng)新不再是大集團，大組織的專屬活動挖垛。
2痒钝、我們需要什么樣的前端架構
企業(yè)級前端技術，說起來挺唬人的...我們平時在公司做的前端工作痢毒，又不是個人的送矩，那不就是企業(yè)級的么。
是的哪替，不過根據(jù)具體運用技術的不同栋荸，前端架構會具有不同的features，筆者所指的企業(yè)級前端架構凭舶，是需要具有很多features晌块，能滿足較高要求網(wǎng)站開發(fā)的架構。
筆者根據(jù)自己經(jīng)驗帅霜，一般對于高可維護性匆背，高訪問量的網(wǎng)站，應該具有如下features(在文末會配合選型框架對部分features實現(xiàn)進行說明)：
基本features
低版本IE支持(IE8+) - 前端開發(fā)人員的痛點
前端性能優(yōu)化支持 - 壓縮身冀、合并钝尸、圖片優(yōu)化
進階features
代碼風格檢查 - 從源頭控制代碼風格
前后端完全分離 - 通過接口進行交互
使用語法糖 - 使用新版本的語法，精簡代碼搂根，提高代碼健壯性和可維護性珍促，與未來保持一致
開發(fā)時的文件變動偵測 - 自動加載改動部分，體現(xiàn)在瀏覽器中
組件化 - 提高可復用性和復用度
代碼模塊化 - 提高代碼內聚性和可維護性剩愧，充分利用瀏覽器緩存機制猪叙，提高前端性能
模塊懶加載 - 防止一次性加載過多代碼，導致長時間用戶等待
移動端和pc端代碼可以不同 - 針對移動端和pc端分別打包
帶版本或者hash的文件名 - 方便部署的時候，先上傳代碼沐悦，然后上傳html成洗，就可以更新網(wǎng)站
前端測試 - 前端單元測試和黑盒自動化測試
接口mock - 進一步解耦前后端開發(fā)，開發(fā)時按照接口藏否，使用mocker瓶殃，防止服務器重啟，代碼更新帶來的干擾
3副签、具體框架選型
由于項目時間壓力和人力的關系遥椿，我們暫時還不能去創(chuàng)造輪子，不過無妨淆储，社區(qū)已經(jīng)有很多優(yōu)秀的輪子供我們選用冠场〉虢纾框架選型設計到很多方面隐绵，可以獨立寫一篇或者多篇文章装处，筆者這里只簡單對比人氣最高的框架击困，突出一下框架的特點。
主體框架選擇
主體框架決定了我們前端代碼的形態(tài)狈癞，框架能幫我們做的事情越多首启，我們自己需要做的事情就越少饱岸。
AngularJS等MVX(X)框架还棱，能夠提供模型到顯示的綁定载慈，這樣我們就從操作dom中解放出來了，自帶的模塊管理珍手，也可以幫助我們實現(xiàn)模塊化办铡。
但是筆者認為，從組件的封裝性上來講琳要，React做得更好寡具，再者AngularJS飽受詬病的性能問題，正好是React的強項稚补，我們有理由選擇React作為主體框架童叠。
web打包工具
web打包工具可以將我們的開發(fā)，發(fā)布流程自動化孔厉，讓我們的開發(fā)和發(fā)布更方便。
既然用了React帖努，webpack作為React的親密小伙伴撰豺，自然為我們選用。Gulp也是很優(yōu)秀的打包工具拼余，筆者認為污桦，gulp的語法更清晰，更淺顯易懂匙监，gulp的功能也更加強大凡橱，無奈React和webpack太親密了小作，webpack也有很多很好的特性，比如在代碼中直接引入樣式稼钩，圖片等顾稀，可以讓模塊的內聚性更高，另外坝撑，gulp也可以和webpack雙劍合璧静秆，實現(xiàn)更NB的功能。
4巡李、以react為核心的企業(yè)級前端架構技術棧
react - 主體框架抚笔，可以通過引入額外文件，實現(xiàn)對IE8的支持
react-router - 配合react侨拦，實現(xiàn)單頁面應用程序
bootstrap - 前端樣式框架殊橙，3.x可以引入額外文件，實現(xiàn)對IE8的支持
webpack - web打包工具
eslint - 檢查代碼風格和潛在的風險狱从，盡量在提交之前更正他們
babel - 將ES6語法編譯成ES5語法膨蛮，支持語法糖的使用
最終成型的代碼，可以在筆者的github上下載到矫夯，地址請繼續(xù)往下看鸽疾，在文章結尾。
5训貌、部分features實現(xiàn)說明
低版本IE支持(IE8+)
React需要es5-shim制肮、es5-sham，bootstrap需要respond.js html5shiv才可以在IE8下正常運行递沪，這4個文件不經(jīng)常變動豺鼻，連同console-polyfill打成1個文件節(jié)省http請求數(shù)。具體做法是ie相關的js單獨作為一個chunk款慨，因為mobile端沒有ie儒飒，不需要這些文件，然后browser端的代碼檩奠，將ie相關的js寫到添加注釋中桩了。
代碼風格檢查
將eslint-loader用于js文件的即可，注意埠戳，eslint-loader應該放在babel-loader下面井誉，讓其先執(zhí)行，然后再執(zhí)行babel-loader整胃。
使用語法糖
使用babel-loader即可颗圣，然后盡情使用es6新語法吧。
開發(fā)時的文件變動偵測
有兩種方式，一種是webpack-dev-server在岂，放在webpack config文件中奔则，另一種是webpack-dev-middleware，提供node api調用蔽午，這里選用webpack-dev-middleware易茬，可以更加靈活。
代碼模塊化
可以使用chunk來代表模塊祠丝，chunk可以通過配置entry產(chǎn)生疾呻，也可以通過require.ensure和require AMD產(chǎn)生，還可以插件產(chǎn)生写半，可以根據(jù)具體的情形岸蜗，選用不同的方式。例如叠蝇，如果是基本類庫璃岳，可以選擇作為entry；如果是業(yè)務模塊悔捶，而且需要動態(tài)加載的铃慷，可以使用require.ensure。
移動端和pc端代碼可以不同
使用不同entry蜕该，將不同平臺需要加載的腳本打包成不同的文件犁柜，然后，通過HtmlWebpackPlugin插件堂淡，將不同entry放入不同模板中馋缅，在不同平臺下，訪問不同模板绢淀，從而實現(xiàn)不同平臺訪問不同代碼萤悴。
結語
以上只是部分features實現(xiàn)的說明，也可能有不清晰的地方皆的，具體實現(xiàn)請移步：https://github.com/Pliman/enterprise-react覆履，如有需要，歡迎留言討論费薄。
本文作者：孫彬（點融黑幫）硝全，程序猿一只。對有技術含量的事情楞抡，都感興趣伟众。足球愛好者，喜歡球場上奔跑的感覺拌倍，現(xiàn)任職于點融技術部成都分部赂鲤。
