前段時間對於前端工程化的理解尚停留在用gulp或者webpack自動構建的層次,但其實包括自己在做項目的過程中早就在踐行「工程化」開發,以下結合一些博客以及自己的理解詳述前端工程化開發的含義。
前端工程化開發
references:
概念
前端工程化是使用軟件工程的技術和方法來進行前端項目的開發、維護和管理。
這裏順帶說下軟件工程的概念:應用計算機科學理論和技術以及工程管理原則和方法,按預算和進度,實現滿足用戶要求的軟件產品的定義、開發、和維護的工程或進行研究的學科.
軟件開發的整個流程我在我的博客:前端開發工作流程中做過更新。
內容
技術選型
在開始前端工程時,根據項目特徵進行技術選型,節省項目開發時間。
代碼規範
保證團隊所有成員以同樣的規範開發代碼。
不同的開發人員開發不同的功能或組件,按照統一的流程合併到主幹。
模塊化開發,組件化開發
模塊是在文件層面上,對代碼和資源的拆分,比如js模塊,css模塊。組件是在UI層面上的拆分,比如頁頭,頁腳,評論區等
模塊管理
一方面,團隊引用的模塊應該是規範的;另一方面,必須保證這些模塊可以正確的加入到最終編譯好的包文件中。(以上兩點可以總結爲模塊化或者組件化開發。)
自動化測試
爲了保證和並進主幹的代碼達到質量標準,必須有測試,而且測試應該是自動化的,可以迴歸的。
構建
主幹更新以後,自動將代碼編譯爲最終的目標格式,並且準備好各種靜態資源,
部署
將構建好的代碼部署到生產環境。
一點思考
一般在做迭代的時候會有一定的概率影響之前一些公共或者非公共的組件,如何實現自動化的迴歸測試,是一個值得探討的地方。
tips: 尋找webpack的依賴樹?