1?前端工程化流程

轉(zhuǎn)自：https://lluvio.github.io/blog/front-end-architecture.html

在知乎上看到?趙雨森同學(xué)?提到前端工程化有四個(gè)方面，模塊化、組件化、規(guī)范化、自動(dòng)化，本人十分贊同，我在工作中也慢慢這幾個(gè)方向作出了總結(jié)

1.1?模塊化

模塊化只是在語(yǔ)言層面上，對(duì)代碼的拆分；而組件化是基于模塊化，在設(shè)計(jì)層面上，對(duì)UI（用戶界面）的拆分

1.1.1?js 的模塊化

現(xiàn)在ES6已經(jīng)在語(yǔ)言層面上規(guī)定了模塊系統(tǒng)，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，而且使用起來(lái)相當(dāng)簡(jiǎn)潔

• webpack + babel 將所有模塊打包成一個(gè)文件加載
• systemjs 分模塊異步加載

1.1.2?css 的模塊化

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

• 使用 vuejs 的scoped style
• [?]?采用一命名風(fēng)格，推薦 BEM
• 采用一css預(yù)處理器，目前使用sass

1.2?組件化

組件化是基于模塊化的，因?yàn)榻M件的單位可以有模板，樣式加邏輯。

另，將你所能看見到的視圖(UI)進(jìn)行合理拆分得到的單元，并能讓它達(dá)到可復(fù)用程度，可稱之為組件。組件的方案采用 vuejs 的單文件組件

1.3?規(guī)范化

為了更好的落實(shí)開發(fā)，可以制定一些規(guī)范

1.3.1?編碼規(guī)范

js使用eslint，目前采用 google 的 javascript style guide

css使用相應(yīng)的stylelint

使用editorconfig，統(tǒng)一編輯器或ide的一些設(shè)定，如js縮進(jìn)為2空格

1.3.2?前后端接口規(guī)范

采用 restful 風(fēng)格，接口描述使用swagger

對(duì)于某些接口返回狀態(tài)碼還是中文結(jié)果，前端應(yīng)盡量不讓去判斷狀態(tài)，只作顯示

1.3.3?版本控制

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

package.json 里的包版本號(hào)應(yīng)寫死，除非因某個(gè)包有了新需求特性，再去更新

1.3.4?目錄結(jié)構(gòu)

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

1.3.5?編碼規(guī)范

長(zhǎng)命名使用駝峰式。類使用 `ClassName`，而方法名或?qū)傩允褂?`classProperty`

1.3.6?協(xié)作工具

這里指的是協(xié)作工具的采用

• 任務(wù)分配，trello/gitlab todo
• 代碼倉(cāng)庫(kù)，gitlab
• 文檔，gitlab wiki/trello
• 產(chǎn)品設(shè)計(jì)，sketch畫圖，inDesign寫文檔

1.3.7?其它規(guī)范

• 開發(fā)環(huán)境。 推薦 unix，與部署環(huán)境統(tǒng)一，且前端許多工具對(duì)unix系友好
• [?]?codereview
• [?]?git提交描述規(guī)范，不規(guī)范就不允許提交
• [?]?中文技術(shù)文檔的寫作規(guī)范

1.4?自動(dòng)化

1.4.1?環(huán)境控制

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

1.4.2?構(gòu)建工具

目前使用webpack/rollup

• 圖標(biāo)使用 svg sprite
• 瀏覽器自動(dòng)刷新，熱加載
• 編譯中間語(yǔ)言，如 es6/7，sass
• js、css的壓縮及混肴
• 壓縮圖片，一定大小內(nèi)使用base64
• 根據(jù)文件內(nèi)容生成哈希值，實(shí)現(xiàn)緩存控制
• 實(shí)現(xiàn)按需加載，見模塊化部分
• umd 打包

1.4.3?持續(xù)化集成

• gitlab/git hook 實(shí)現(xiàn) hook
• jenkin/gitlab ci執(zhí)行相應(yīng)的構(gòu)建腳本，并訂閱構(gòu)建結(jié)果
• [?]?將構(gòu)建結(jié)果打包，交給運(yùn)維部署

1.4.4?項(xiàng)目徽章

無(wú)論是開源項(xiàng)目還是私有項(xiàng)目都可以使用徽章查看狀態(tài)

• travis/circle，持續(xù)集成
• codacy，代碼審查
• npm，提供版本號(hào)，下載量等
• 開源許可，一般采用 mit
• [?]?codecov，代碼覆蓋率檢測(cè)
• [?]?saucellabs，跨瀏覽器集成測(cè)試

2?前端技術(shù)選型

基于以上工程化流程，技術(shù)選型如下：

• 基礎(chǔ)庫(kù) vue
• node中間層 koa
• css預(yù)處理 sass
• 日志收集 sentry
• 前端測(cè)試框架 jasmine
• 構(gòu)建工具 webpack/rollup
• 調(diào)試工具 chrome/ide/vue-dev-tools
• 后臺(tái)進(jìn)程管理 pm2
• 包管理工具 npm/yarn
• 前后端通信 json-rpc/swagger/graphql(查詢)

3?前端項(xiàng)目配置

3.1?css

3.1.1?reset

css reset 采用 normalize.css

3.1.2?布局

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

3.1.3?動(dòng)畫庫(kù)

hover，animate.css，velocity

3.1.4?sass

sass 存在 Duplicate import problem

暫時(shí)沒去解決，現(xiàn)有以下可以解決辦法

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

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

參考地址?http://ryerh.com/sass/2016/03/15/vue-webpack-duplicate-sass-import.html

3.2?webpack

3.2.1?noParse

webpack會(huì)花很多的時(shí)間查找一個(gè)庫(kù)的依賴，使用該參數(shù)可以在webpack 中忽略對(duì)已知文件的解析

例如，這里我們可以確定 vue 是沒有依賴項(xiàng)的，配置如下

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

這樣我們?cè)陧?xiàng)目中可以使用

import vue from 'vue'

3.2.2?alias

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

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

以上配置可以讓我們?cè)谛枰霉媒M件時(shí)不必考慮目錄層級(jí)的問(wèn)題

import modal from 'ui/modal.vue'

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

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

3.2.3?uglifyJs

// 去除console new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,pure_funcs: [ 'console.log', 'console.info' ]}, }),

3.2.4?TODO?tree shaking

讓webpack理解es6 的導(dǎo)入機(jī)制，例如現(xiàn)在有兩個(gè)文件

// utils.js export function foo() {return 'foo'; } export function bar() {return 'bar'; } // app.js import { 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.jsfunction foo() {return 'foo';}function bar() {return 'bar';}/***/ }

可以看到上面包含了 foo 和 bar 兩個(gè)函數(shù)，把utils里的內(nèi)容全部打包進(jìn)去了，如果使用tree-shaking，輸出結(jié)果是這樣的

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

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

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

已經(jīng)沒有bar了

3.3?babel

在項(xiàng)目下創(chuàng)建一個(gè)?.babelrc?的配置文件。目前通過(guò)插件babel主要提供了以下幾個(gè)功能

在vue中異步加載可將 system.import 轉(zhuǎn)為 import()

使用 tree shaking

使用 es6/7 語(yǔ)法及特性

3.4?性能

3.4.1?TODO?圖片

• 預(yù)加載 例如用戶輸入賬號(hào)的時(shí)候通過(guò)?new Image()?預(yù)先加載圖片
• cdn服務(wù)

3.5?前端常用庫(kù)

待補(bǔ)充

4?最后

附上一個(gè)后臺(tái)項(xiàng)目?demo

總結(jié)

以上是生活随笔為你收集整理的前端项目架构小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。