前端工程化那些事

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

1.腳手架

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

1.1 常見的腳手架工具

vue官方腳手架：vue-cli

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

如何安裝

npm install -g @vue/cli-service-globa

如何快速創建一個項目


vue create admin-templat

創建模式有兩種，一種是默認配置（沒有帶其他輔助功能的 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 ：用於五彩斑斕的控制檯

1.3 模版管理

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

感興趣深入學習的童鞋可以閱讀，前端搭建自己的腳手架，這個方式比較簡單，通過將git的命令做成了腳本命令

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請求數，優化加載速度

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

2.3 Parcel

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

Parcel相比前面介紹的webpack最大的區別就是：不需要維護配置文件，舉個例子來說明：如果你想轉換less的語法，在webpack你需要配置less-loader來完成，而Parcel不需要安裝 less, 當檢測到 less 文件時 Parcel 將會自動轉換。換句話說：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.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配置，感興趣的童鞋可以查看文檔點我👈

主要目的是爲了防止修改過多的文件後，導致後期修改、維護等困難

4.5 文檔約束
如果團隊較小，可以參考一線互聯網公司前端規範，統一代碼風格

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應用管中繁瑣任務

作者：火焰
鏈接：https://blog.csdn.net/weixin_45579770/article/details/105644771
來源：CSDN
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

前端工程化那些事

1.腳手架

2.構建工具

3.Mock 服務

4.前端規範

5.單元測試

6.項目部署

CCF業務總部及學術交流中心設計方案公示了

java算法應用--百錢買雞

程序員必備技術網站

## Vue之虛擬DOM(vdom)

小學生面試初級Java開發之路

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結