前端工程化那些事

❝

什麼是前端工程化？本質上就是將前端開發流程，標準化、規範化、工具化、自動化、簡單化。經過規範和工具來提升前端應用質量及開發效率

❞

1.腳手架

❝

腳手架用於快速生成新項目的目錄模板，並集成一系列體系化工具的安裝，可以提高前端開發人員的效率，減小copy操做

❞

1.1 常見的腳手架工具

• vue官方腳手架：vue-cli

❝

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統官方文檔🚀

❞

如何安裝

npm install -g @vue/cli-service-globa
複製代碼

如何快速建立一個項目

vue create admin-template
複製代碼

建立模式有兩種，一種是默認配置（沒有帶其餘輔助功能的 npm包），另外一種是手動配置（可按照生產須要進行配置）

• Yeoman

❝

官方介紹：Yeoman幫助您啓動新項目，規定最佳實踐和工具以幫助您保持生產效率，它是一個腳手架底層框架，你也能夠經過yeoman定製本身的腳手架實現。

❞

Yeoman主要包括： yo（腳手架，自動生成工具)、 Grunt、gulp（構建工具)、 Bower、npm --- （包管理工具)等

如何安裝

npm install -g yo  
複製代碼

yeoman 社區有不一樣項目目錄模板能夠選擇查看連接，也可使用 yeoman-generator 封裝本身的腳手架

1.2 開發腳手架工具

❝

現有的腳手架自定義及定製化程度不高的狀況，團隊須要定製化適合自身開發的腳手架工具，下面列舉開發腳手架工具涉及的經常使用工具庫以下👇

❞

• child_process：用於執行shell命令
• commander ：用於處理控制檯命令 🔗使用文檔
• inquirer： 用於控制檯 🔗使用文檔
• semver： 用於版本檢測提示 🔗使用文檔
• fs-extra： 用於fs操做詢問 🔗使用文檔
• execa ：用於執行終端命令 🔗使用文檔
• chalk ：用於五彩斑斕的控制檯 🔗使用文檔

關於腳手架在項目中實踐能夠閱讀樹醬的《從0到1開發簡單腳手架》

1.3 模版管理

❝

看完前兩小節的童鞋可能會以爲，配置腳手架以及開發腳手架對於規模較小的團隊工做量很大，那能夠經過生成一個統一的模版，而後用倉庫管理維護起來，下次須要的時候建立新項目時，直接經過倉庫拉取模版便可

❞

1.4 總結

❝

腳手架能提升項目初始化搭建的效能，減小搭建項目所消耗的時間，團隊規模大的有條件能夠自行開發內部的腳手架工具，而對於規模小的團隊，開發腳手架工具「產出比」不是很高，畢竟腳手架工具完成項目初始化以後，腳手架就再無用武之地了，因此若是對於開發力量不大的團隊而言，投入時間去開發一個腳手架工具不是很「划算」，簡單的方式就是創建內部的模版管理，用git或者svn管理起來便可

❞

2.構建工具

❝

什麼是構建工具？構建工具可讓咱們更好地自動化處理包括（es6轉換，css、js壓縮，less、sass的轉換等），讓咱們再也不須要手動地去重複作這些事情，解放開發人員的雙手，更好地聚焦到業務上的開發，構建本質上就是將代碼「串」起來，而後壓縮並混淆，最終構建出目標代碼文件，常見的構建工具備：webpack、rollup、Parcel、grunt、gulp

❞

2.1 Webpack

❝

webpack是前端打包工具，經過分析所在項目的目錄結構，找到模塊及各模塊間的依賴關係，且將瀏覽器不能直接運行的語言如typescript、css預處理器語法（less、sass）等或者由於瀏覽器由於版本底不支持新的內置函數，須要將其轉換及打包成瀏覽器支持格式，👇是主要的特徵

❞

• css預處理器如less、sass等瀏覽器不支持
• 部分低版本瀏覽器不支持es6語法，須要轉換爲es5語法，爲瀏覽器使用
• 項目依賴過多，文件過多，須要將複雜的代碼結構轉換爲細化
• 模塊化打包，保留單個模塊的可維護性，又減小了http請求數，優化加載速度

關於webpack在項目中實踐能夠閱讀樹醬的《【webpack】從vue-cli 2x 到 3x 遷移與實踐》

更多webpack的配置和學習能夠閱讀如下文章👇

• webpack：從入門到真實項目配置
• 從零開始配置webpack(基於webpack 4 和 babel 7版本)
• 帶你深度解鎖Webpack系列(進階篇)

2.2 Rollup

❝

rollup比較適合打包js的sdk或者封裝的框架,具有 Tree-shaking ,對上一節介紹的webpack，則比較適合打包一些應用，例如SPA或者同構項目

❞

關於Rollup在項目中實踐能夠閱讀樹醬的《前端JS-SDK那些事》

更多Rollup的配置和學習能夠閱讀如下文章👇

• 關於Rollup那些事

2.3 Parcel

❝

官方介紹：Parcel 是 Web 應用打包工具，適用於經驗不一樣的開發者。它利用多核處理提供了極快的速度，而且不須要任何配置 官方連接🚀

❞

Parcel相比前面介紹的webpack最大的區別就是：不須要維護配置文件，舉個例子來講明：若是你想轉換less的語法，在webpack你須要配置less-loader來完成，而Parcel不須要安裝 less, 當檢測到 less 文件時 Parcel 將會自動轉換。換句話說：Parcel能作到無配置完成項目構建要求，簡單！

優點在於：打包時間也更快！🚀

更多的配置和學習能夠閱讀如下文章👇

• 從 webpack 到全面擁抱 Parcel #1 探索 Parcel

2.4 包管理工具構建 npm

❝

可使用npm腳原本執行構建操做，在packjson中編寫對應的命令，經過執行npm run [任務]的方式，以下所示👇

❞

"scripts": {
 "serve": "vue-cli-service serve ",  "build": "vue-cli-service build",  "build_development": "vue-cli-service build --mode development",  "build_test": "vue-cli-service build --mode test",  "build_preproduction": "vue-cli-service build --mode preproduction",  "build_production": "vue-cli-service build --mode production",  "unit": "jest --config src/test/unit/jest.conf.js --coverage",  }, 複製代碼

根據不一樣任務，定義不一樣的執行命令

2.5 總結

• Webpack：適⽤於⼤型項目構建：webpack目前生態最完善，應用場景更多，社區人氣高，有強⼤的loader和插件⽣態
• Rollup：適⽤於工具庫的打包: 能夠將各個模塊打包進⼀個⽂件中，具有 Tree-shaking 來刪除⽆⽤的代碼,下降代碼體積,可是不具有webpack強大的插件生態，定位更適用於聚焦於庫的打包
• Parcel：適⽤於試驗: 雖然無配置的優點，能夠快速打包應用，且打包效率，可是不具有Tree-shaking，致使輸出文件偏大
• grunt、gulp：適用於項目工具流構建，慢慢被替換替代，不推薦使用

3.Mock 服務

❝

Mock 指是解決前端在完成頁面搭建後，此時須要聯調後端接口時，後端接口還沒有開發完成，還沒法聯調時前端能夠先按照事先與後端約束好的數據結構來模擬接口數據來走完開發（ 通常是經過後端接口文檔好比Swagger ），實現真正意義上的先後端分離

❞

前端Mock主要包括如下幾種方式：

• 數據攔截型
• json-server服務型
• 可視化接口管理平臺

3.1 數據攔截型

❝

數據攔截指的是經過模擬Http請求對相應匹配的接口進行真實請求攔截，返回模擬的數據，目前主要的工具備如下👇

❞

• mockjs

❝

官方介紹：Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試，經過模擬 Ajax 請求，生成並返回模擬數據 官方文檔

❞

如何安裝

npm install mockjs;
複製代碼

如何使用

❝

更多mock示例語法 👉點我

❞

//mock.js
const Mock = require('mockjs'); Mock.mock(new RegExp('/user/info'), 'get', {  'code': 0,  'msg': 'success',  'data': {  "content|15": [{  "startTime": "@date('yyyy-MM-dd')",  "createUser": '@cname', //名字爲隨機中文名字  "endTime": "@date('yyyy-MM-dd')",  "ago|18-28":25, //年齡爲18-28之間的隨機數字  "sex|1": ["female", "male"], //返回數組中隨機的一個  "ud": "@increment" //自增  }],  } }) 複製代碼

main.js中引入mock.js，須要判斷項目所處環境，只在mock環境則引入

import Vue from 'vue'
import App from './App' import router from './router' import axios from 'axios'; if(process.env.NODE_ENV === 'mock'){  require('./mock.js') } Vue.prototype.$axios = axios;  new Vue({  el: '#app',  router,  components: { App },  template: '<App/>' }) 複製代碼

當前端發起請求接口中匹配到api:'/user/info',則不會向後端發起真正的接口請求，而是被該mock攔截了，返回了咱們原先設定的接口數據，以下

axios.get('/user/info', {}}).then(res=> {
 console.log(res);  }) 複製代碼

以下圖👇所示mock成功，能夠看到咱們定義的mock數據成功返回，攔截方式也只能經過console來查看數據返回，由於在Chrome的Network中無法看到請求，這也是它的一個缺點

3.2 json-server服務型

❝

json-server是一個 Node 模塊，經過運行 Express 服務器，能夠直接把一個json文件做爲一個具有全RESTful風格的API,並支持跨域、jsonp、路由訂製等功能的 web 服務器，也可結合上一節介紹的mock.js,來達到mock數據的效果

❞

對比單獨上一節提到mock.js數據攔截型這種方式，json-server優點在於可以看到真實的網絡請求，而劣勢則在於須要運行一個node服務，更多使用能夠閱讀官方文檔🚀

• 如何安裝

npm install -g json-server
複製代碼

• 如何使用

json-server --watch db.json
// db.json 爲mock數據源 複製代碼

3.3 Mock接口管理平臺

❝

上一節介紹數據攔截型的使用，可是若是當你團隊比較大，項目衆多的狀況下，每一個項目都須要去維護這樣的「數據」，是及其不便的，那麼有沒有更好的方式呢？

❞

那就是經過mock接口管理平臺，好比rap、easy-mock文檔連接、YApi文檔連接等，這裏介紹下YApi

• YApi

❝

官方介紹：YApi是高效、易用、功能強大的 api 管理平臺,旨在爲開發、產品、測試人員提供更優雅的接口管理服務。能夠幫助開發者輕鬆建立、發佈、維護 API

❞

相比上一節講的數據攔截型而言，YApi支持基於 Swagger 建立項目，節省手動建立的時間，以便快速生成各模塊接口結構，同時免去你繁瑣的手動添加操做

選擇數據管理，開啓url導入，輸入swagger接口文檔連接

3.4 總結

❝

若是團隊項目規模較小，那麼推薦使用數據攔截型（mockjs）就足夠，變動方便，但若是項目規模大,多人協做，且需求接口變動快，建議使用mock接口管理平臺

❞

4.前端規範

❝

隨着前端工程化的日益成熟，代碼規範化對於開發效率的提高起着很大的做用，包括後期的維護，統一的規範能節省交接的時間成本，而規範包括目錄結構、代碼質量（命名、註釋、JS規範、CSS規範、縮進等）

❞

4.1 目錄結構

❝

根據業務模型來規範項目的src目錄

❞

靜態資源目錄: assets
本地數據模擬目錄: mocks 公共函數方法目錄: utils 單元測試目錄: test 常量目錄: consts icon目錄: icons 公共混合函數目錄: mixin 路由目錄: router 組件目錄: components 頁面目錄： views 配置目錄： config 服務api接口管理目錄： api vuex 狀態管路目錄： store .env*: 項目中咱們一般會使用環境變量來影響應用在不一樣運行環境下的行爲. 從文件中讀取環境變量 複製代碼

4.2 語法約束

• 組件化命名規則

1. 按照功能命名：好比頭部就是 Header,就是頭部導航欄
2. 按照頁面來分組件：好比文章列表 NewsItem，便可用於文章列表，也能夠用在詳情頁的內容推薦

1.組件的文件名始終是單詞大寫開頭 如：(PascalCase)
2.在聲明 prop 的時候，其命名應該始終使用 駝峯命名法 3.組件名應該是完整單詞而不是縮寫 複製代碼

• vue規範

1.老是用 key 配合 v-for
2.不要把 v-if 和 v-for 同時用在同一個元素上。 3.Object.freeze 方法來凍結一個不會有任何改變的對象，減小組件初始化的時間 4.每一個組件 export default {} 內的方法順序一致，方便查找對應的方法。 按照 data、props、鉤子、watch、computed、components 5.props里加數據類型，是否必傳，以及默認值，便於排查錯誤，讓傳值更嚴謹 6.使用定時器，要在beforeDestroy()生命週期內清除定時器 複製代碼

• css命名

❝

隨着項目模塊增多，防止由於不一樣頁面或者組件中定義的css衝突，因此規範css語法也變得相當重要，推薦:BEM，分別表明着:Block(塊)、Element(元素)、Modifier(修飾符)

❞

.user-info {} # user-info 是一個塊，我理解是一個模塊
.user-info--feature {} # user-info--feature 是一個修飾符，用來表示這個塊的不一樣狀態 .user-info__title{} # user-info__title 是一個元素，屬於userinfo模塊下的，多個元素組成塊 複製代碼

4.3 開發工具規範

• eslint

❝

一個插件化的 javascript 代碼檢測工具，它能夠用於檢查常見的 JavaScript 代碼錯誤，也能夠進行代碼風格檢查

❞

推薦使用到兩個擴展包（airbnb規範官方文檔連接 🚀 & eslint-plugin-vue 官方文檔連接🚀）

• Prettier

❝

是格式化代碼工具。用來保持團隊的項目風格統一

❞

• stylelint

❝

stylelint是的css代碼審查工具供，用來約束css的書寫規範，加強代碼可讀性，官方文檔

❞

具體使用請閱讀樹醬的《前端規範那些事》

4.4 Git commit 規範

❝

commit 規範能夠更好的造成清晰的提交記錄（changelog），經過制定 相應的 Commit Message 規範來約束開發人員根據不一樣的提交添加備註，經常使用的類別以下

❞

• 約束定義

feature: 開發新的功能
fix: 修復bug refactor: 代碼重構 docs: 文檔修改 style: 代碼格式修改, 注意不是 css 修改 test: 測試用例修改 perf: 改善性能 build: 變動項目構建或外部依賴（例如scopes: webpack、gulp、npm等） revert: 代碼回退  好比： git commit -m 'fix：修復某某bug' 複製代碼

除了上面簡單的規範，還能夠經過集成Commitlint配置，下一節教你如何上手，感興趣的童鞋能夠查看更多官方文檔信息點我👈,

• 自動化檢測

❝

那如何在vue-cli上配置呢？這個時候就須要用到 Git Hook vue-cli3x的官方配置支持看這裏 點我👈 。他把yorkie（尤大改寫）作了封裝，yorkie本質上是經過fork husky的基礎上作了一些定製化的改動，使得hook鉤子能從package.json的 "gitHooks"屬性中讀取，咱們能夠經過gitHooks配置結合Commitlint來實現自動化檢測commit的提交log，下面是流程圖👇

❞

安裝commitlint

npm install -g @commitlint/cli @commitlint/config-conventional
複製代碼

建立commitlint配置文件

// 新建 commitlint.config.js 
module.exports = {  extends: ['@commitlint/config-conventional'],  rules: {  'type-enum': [  2,  'always',  [  'feature', // 開發新的功能  'fix', // 修補bug  'refactor', // 代碼重構  'docs', // 文檔（documentation）  'style', // 格式（不影響代碼運行的變更）  'test', // 增長測試  'build', // 變動項目構建或外部依賴（例如: webpack、package等）  'revert', // 回滾  'perf', // 改善性能  ],  ],  'type-empty': [2, 'never'], // 提交不符合規範時,也能夠提交,可是會有警告  'subject-empty': [2, 'never'], // 提交不符合規範時,也能夠提交,可是會有警告  'subject-full-stop': [0, 'never'],  'subject-case': [0, 'never'],  }, };  複製代碼

配置gitHooks

// package.json
"gitHooks": {  "pre-commit": "lint-staged",  "commit-msg": "commitlint -E GIT_PARAMS"  },  "lint-staged": {  "*.js": [  "vue-cli-service lint"  ],  "*.vue": [  "vue-cli-service lint"  ]  }, 複製代碼

4.5 文檔約束

❝

若是團隊較小，能夠參考一線互聯網公司前端規範，統一代碼風格、

❞

• 京東凹凸實驗室代碼規範
• clean-code-javascript
• Airbnb團隊
• 百度fex團隊

5.單元測試

❝

單元測試是工程化中用來確保項目質量及代碼質量的一個環節，雖然測試並不能直接地減小bug，可是能夠減小由於反覆修改過程當中新生成的bug，由於當你修改代碼時，很容易忽略以前設定的一些邏輯，致使系統出現故障

❞

5.1 準備工做

• 須要先選定一個單元測試框架：jest、Mocha、Karma等
• 制定測試規則
• 約束團隊單元測試覆蓋率最小值：好比函數覆蓋率達到80%，那麼若是每次自動化測試達不到這個條件，項目就發佈失敗，直到完成目標條件

5.2 遵循規則

❝

不管使用什麼單元測試框架，萬變不離其宗，基本的原則都是依靠如下幾點👇

❞

• 假設：如：test('formatTime()默認格式，返回時間格式是否正常', () => {}) 指定完成測試所要達成的條件
• 當：所要執行的操做，如：date.formatTime(1586934316925) 執行這個函數的測試
• 那麼：獲得的結果，既得到斷言 如： expect(date.formatTime(1586934316925,'yyyy.MM.dd')).toBe('2020.04.15');

更多使用請閱讀樹醬的《前端單元測試那些事》

6.項目部署

❝

完成項目開發後，上線部署也是工程化一個重要的環節，而對於前端項目而言，部署並非一件痛苦的事情

❞

目前大部分SPA只是單純的靜態資源文件，直接打包，而後用nginx作代理就能夠完成簡單的部署，也能夠結合docker和jenkins作自動化部署，持續部署、持續集成。

而對於服務端渲染的前端應用，部署相對而言環節多一些，還須要管理進程、監控服務是否正常等等，就涉及到其餘工具的使用，下面是前端工程化項目部署涉及到的幾個主流工具以下👇

• jenkins: 一個可擴展的自動化服務器，能夠用做簡單的 CI 服務器，具備自動化構建、測試和部署等功能
• docker: 虛擬環境容器,能夠將環境、代碼、配置文件等一併打包到這個容器中,最後發佈應用
• npm : Node.js 官方提供的包管理工具，主要用來管理項目依賴，發佈
• nginx: 能夠做爲 Web 服務器，也能夠做爲負載均衡服務器，具有高性能、高併發鏈接
• pm2: node進程管理工具，能夠利用它來簡化不少node應用管中繁瑣任務

更多使用請閱讀樹醬的《前端運維部署那些事》

參考文獻： 《前端架構從入門到微前端》

請你喝杯🍵 記得三連哦～

1.閱讀完記得給🌲 醬點個贊哦，有👍 有動力

2.關注公衆號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star✨