前端工程化初探

前言

目前我所理解的前端工程化, 顧名思義, 就是讓前端項目具有工程特性: 知足規範化,流程化,自動化等要求, 隨着大前端時代下前端發展的速度愈來愈快, 項目也日漸複雜起來, 前端項目管理也越來龐雜, 形成項目維護性差,開發效率低等弊病吧; 在接手了公司前端業務一段時間後, 也感受存在這些問題, 目前正在嘗試將前端工程化這一塊作起來...

前端工程按項目階段劃分能夠分爲: 項目初期構建(這是忽略項目預研,技術選型等,單從工程開發的角度來看); 中期的項目開發; 後期的項目測試,優化以及持續集成和部署. 其實就是某個項目從0到1的過程, 一個約束團隊統一行爲的過程.

項目構建階段

項目初期要制定好規範, 用來約束團隊人員的開發行爲,便於管理,目前想到下面幾點;

1.git流程規範

git分支管理: release: 線上發佈分支, pre-release: 預發佈; dev:開發分支; xxx-dev: 我的開發分支  
commit規範管理: 描述以功能模塊爲單位進行提交

2.目錄結構規範

以vue項目爲例, 目前項目都是以vue腳手架進行搭建的,而後在腳手架的基礎上進行相關擴展配置; 

1.項目採用 vue + webpack模板; 運行命令 vue init webpack project-name便可, 根據需求選擇配置項

2.建立目錄和相應文件

2.1-構建目錄build, 能夠分爲測試,預發佈,線上三種環境配置,看具體需求

2.2-環境變量配置config, 配置不一樣環境下接口,或者其餘變量

2.3-項目文檔readme, 項目規範及結構概述, 這個比較重要

其餘文件夾都大同小異; 都在readme中寫出來了, 暫不作概述; 後面會對經常使用的webpack相關配置作一些總結

項目開發階段

到了開發階段後, 咱們須要遵照的就是組件化和模塊化的開發思想; 按照項目預先制定的規範進行組件化和模塊化開發;
好比咱們拿到UI稿圖後, 先將頁面看做一個大型組件, 而後拆成若干中型組件, 發現相同的地方咱們繼續拆成公共的基礎組件...這就是組件化開發;
模塊化呢? 模塊化就是將一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。咱們日常使用的ES6模塊導入系統以及徹底夠用了; 這樣咱們能夠將js, css, 靜態資源等分紅不一樣模塊文件便於管理, 這些通常都會寫在項目規範中;
其實這一個過程,我以爲更重要是團隊成員按照既定的項目規範去落實本身的開發任務...

項目後期階段

當咱們開發完前端項目, 須要本身進行單元測試, 自動化構建, 部署測試環境,線上環境等等...
像單元測試,自動化構建這些, webpack就能夠幫咱們搞定, 不過須要注意一些配置細節; 自動集成部署能夠採用gitlab-ci或者jenkins等一類工具來搞定; 會涉及到一些服務器腳本方面的知識;
我這裏採用的是gitlab-ci方案;
大體過程是:

1.先到目標服務器註冊gitlab-runner服務, 去倉庫拿到url和token去服務器register

2.再到項目文件下建立一個gitlab-ci.yml文件, 寫上shell腳本; 固然你在註冊的時候也以選擇docker等其餘方式, 
一個簡單的腳本示例, 只有構建階段; 這裏面可能還會涉及到服務器目錄的一些操做權限問題; 須要chomd修改一下;

這樣每一次推送測試分支, 代碼會自動在服務器上進行構建,並完成部署發佈, 避免手動上傳項目帶來的麻煩
發佈項目還須要咱們去配置web服務器; 這裏用的nginx服務器, nginx一些經常使用命令仍是要掌握的

總結一下

前端工程化目前的理解就是: 開發中所制定的一套流程控制和規則,旨在提升開發生產力; 包括了項目搭建, 項目解耦開發, 規範約束, 自動化構建,測試,發佈,部署等一系列內容;
後面會把本身遇到的一些問題更新到文章中...