1?前端工程化流程

轉自：https://lluvio.github.io/blog/front-end-architecture.html

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

1.1?模塊化

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

1.1.1?js 的模塊化

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

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

1.1.2?css 的模塊化

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

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

1.2?組件化

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

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

1.3?規范化

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

1.3.1?編碼規范

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

css使用相應的stylelint

使用editorconfig，統一編輯器或ide的一些設定，如js縮進為2空格

1.3.2?前后端接口規范

采用 restful 風格，接口描述使用swagger

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

1.3.3?版本控制

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

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

1.3.4?目錄結構

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

1.3.5?編碼規范

長命名使用駝峰式。類使用 `ClassName`，而方法名或屬性使用 `classProperty`

1.3.6?協作工具

這里指的是協作工具的采用

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

1.3.7?其它規范

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

1.4?自動化

1.4.1?環境控制

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

1.4.2?構建工具

目前使用webpack/rollup

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

1.4.3?持續化集成

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

1.4.4?項目徽章

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

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

2?前端技術選型

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

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

3?前端項目配置

3.1?css

3.1.1?reset

css reset 采用 normalize.css

3.1.2?布局

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

3.1.3?動畫庫

hover，animate.css，velocity

3.1.4?sass

sass 存在 Duplicate import problem

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

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

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

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

3.2?webpack

3.2.1?noParse

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

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

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

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

import vue from 'vue'

3.2.2?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') }

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 的導入機制，例如現在有兩個文件

// 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 兩個函數，把utils里的內容全部打包進去了，如果使用tree-shaking，輸出結果是這樣的

/***/ (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'; } /***/ }),

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

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

已經沒有bar了

3.3?babel

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

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

使用 tree shaking

使用 es6/7 語法及特性

3.4?性能

3.4.1?TODO?圖片

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

3.5?前端常用庫

待補充

4?最后

附上一個后臺項目?demo

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。