前端工程

08-26

前端工程

來自專欄志剛的日常

在知乎上看到趙雨森提到前端工程化有四個方面，模塊化、組件化、規範化、自動化，本人十分贊同，我在工作中也慢慢這幾個方向作出了總結

模塊化

模塊化只是在語言層面上，對代碼的拆分；而組件化是基於模塊化，在設計層面上，對UI（用戶界面）的拆分

js 的模塊化

現在ES6已經在語言層面上規定了模塊系統，完全可以取代現有的CommonJS和AMD規範，而且使用起來相當簡潔

webpack + babel 將所有模塊打包成一個文件載入
systemjs 分模塊非同步載入

css 的模塊化

目前使用了這三方式處理:

使用 vuejs 的scoped style
[ ] 採用一命名風格，推薦 BEM
採用一css預處理器，目前使用sass

組件化

組件化是基於模塊化的，因為組件的單位可以有模板，樣式加邏輯。

另，將你所能看見到的視圖(UI)進行合理拆分得到的單元，並能讓它達到可復用程度，可稱之為組件。組件的方案採用 vuejs 的單文件組件

規範化

為了更好的落實開發，可以制定一些規範

編碼規範

js使用eslint，目前採用 google 的 javascript style guide
css使用相應的stylelint
使用editorconfig，統一編輯器或ide的一些設定，如js縮進為2空格

前後端介面規範

採用 restful 風格，介面描述使用swagger

對於某些介面返回狀態碼還是中文結果，前端應盡量不讓去判斷狀態，只作顯示

版本控制

node module 遵循unix的思想–do one thing and do it well，也因此單個上層的模塊會依賴很多下層的模塊，這可能會導致其中一個下層的模塊改變，導致整個上層模塊崩潰。

package.json 里的包版本號應寫死，除非因某個包有了新需求特性，再去更新

目錄結構

文件名一律小寫，參考
採用就近原則

協作工具

這裡指的是協作工具的採用

任務分配，trello/gitlab todo
代碼倉庫，gitlab
文檔，gitlab wiki/trello
產品設計，sketch畫圖，inDesign寫文檔

其它規範

開發環境。推薦 unix，與部署環境統一，且前端許多工具對unix系友好
[ ] codereview
[ ] git提交描述規範，不規範就不允許提交
[ ] 中文技術文檔的寫作規範

自動化

環境控制

使用docker自動化部署，集群使用 kubernetes(k8s)

構建工具

目前使用webpack/rollup

圖標使用 svg sprite
瀏覽器自動刷新，熱載入
編譯中間語言，如 es6/7，sass
js、css的壓縮及混餚
壓縮圖片，一定大小內使用base64
根據文件內容生成哈希值，實現緩存控制
實現按需載入，見模塊化部分
umd 打包

持續化集成

gitlab/git hook 實現 hook
jenkin/gitlab ci執行相應的構建腳本，並訂閱構建結果
[ ] 將構建結果打包，交給運維部署

項目徽章

無論是開源項目還是私有項目都可以使用徽章查看狀態

travis/circle，持續集成
codacy，代碼審查
npm，提供版本號，下載量等
開源許可，一般採用 mit
[ ] codecov，代碼覆蓋率檢測
[ ] saucellabs，跨瀏覽器集成測試

前端技術選型

基於以上工程化流程，技術選型如下：

基礎庫 vue
node中間層 koa
css預處理 sass
日誌收集 sentry
前端測試框架 jasmine
構建工具 webpack/rollup
調試工具 chrome/ide/vue-dev-tools
後台進程管理 pm2
包管理工具 npm/yarn
前後端通信 json-rpc/swagger/graphql(查詢)

前端項目配置

css

reset

css reset 採用 normalize.css

布局

不考慮兼容的情況下，一維用 flexbox，二維用 css grid，單位 rem/vm vw，更改盒模型為 box-sizing減少padding和border的計算；考慮兼容性則使用 bootstrap3 提供的grid布局方案

動畫庫

hover，animate.css，velocity

sass

sass 存在 Duplicate import problem

暫時沒去解決，現有以下可以解決辦法

Extract File
Webpack loader global
Webpack 去重代碼(待證實)
cssnano(推薦)

結論是盡量不要使用引用, variable或者function之類的可以使用

參考地址 ryerh.com/sass/2016/0…

webpack

noParse

webpack會花很多的時間查找一個庫的依賴，使用該參數可以在webpack 中忽略對已知文件的解析

例如，這裡我們可以確定 vue 是沒有依賴項的，配置如下

// 支持正則匹配文件名 module :{ noParse: { vue: ./node_modules/vue/vue.min.js } }

這樣我們在項目中可以使用

import vue from vue

alias

為引入模塊提供別名，這個可以減少webpack去查找引入模塊位置的時間，同時也為我們開發中引入公用模塊提供方便

resolve: { alias: { ui: path.resolve(__dirname, app/compontens/ui), fonts: path.resolve(__dirname, app/assets/fonts) }}

以上配置可以讓我們在需要引用公用組件時不必考慮目錄層級的問題

import modal from ui/modal.vue

css如果要使用webpack中的alias，需要在alias名前加上 ~

@font-face { url( "~fonts/iconfont.woff") format(woff)}

TODO tree shaking

讓webpack理解es6 的導入機制，例如現在有兩個文件

// utils.jsexport function foo() { return foo;}export function bar() { return bar;}// app.jsimport { foo } from ./utils

如果不使用 tree-shaking，app.js編譯輸出為

/***/ function(module, exports) { use strict; Object.defineProperty(exports, "__esModule", { value: true }); exports.foo = foo; exports.bar = bar; // utils.js function foo() { return foo; } function bar() { return bar; }/***/ }

可以看到上面包含了 foo 和 bar 兩個函數，把utils里的內容全部打包進去了，如果使用tree-shaking，輸出結果是這樣的

/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";/* harmony export (immutable) */ __webpack_exports__["a"] = foo;/* unused harmony export bar */// utils.jsfunction foo() { return foo;}function bar() { return bar;}/***/ }),

我們可以看到哪些方法是沒有被使用的，你可以通過 --optimize-minimize 參數壓縮代碼剔除未被使用的函數

// 腳本 "scripts": { "build": "webpack --optimize-minimize", "seebuild": "webpack" }// 通過格式工具查看到的結果function(t, e, n) { "use strict"; function r() { return "foo" } e.a = r}

已經沒有bar了

babel

在項目下創建一個 .babelrc 的配置文件。目前通過插件babel主要提供了以下幾個功能

在vue中非同步載入可將 system.import 轉為 import()
使用 tree shaking
使用 es6/7 語法及特性

性能

TODO 圖片

預載入例如用戶輸入賬號的時候通過 new Image() 預先載入圖片
cdn服務

原文鏈接：lluvio.github.io