2.1 前端工程化概述

01-24

在前端開發的初始階段，開發者通常只用關 html, css, javascript。但是現代化的前端開發已經不僅僅是業務代碼本身，真正的前端開發環境涉及很多方面的需求，如：

開發需求
共享需求
性能需求
部署需求

這些東西我們都統一的叫做前端工程化，為了簡化前端工程化的配置，出現了很多優秀的工具比如：

前端工作流工具：Gulp，Grunt，Broccoli
前端 Javascript 模塊編譯工具：Babel，Browserify，Webpack
前端開發系列工具： livereload，數據 mock，代碼監控，代碼檢查

在本節中我們對涉及到這些概念進行簡單的概述介紹。

2.1.1 前端開發需求

在開始一個前端項目的時候，通常我們會進行技術選型，然後定義代碼規範，已經配合後端和業務進行項目的目錄規劃，我把這些相關的需求都歸為前端開發需求。

代碼規範

開發通常來說是一個團隊的事，在大型的前端開發團隊中，通常會定義團隊的代碼開發規範，也可以遵循一些開源的規範：airbnb style guide。代碼規範可以提高代碼的可閱讀性和避免一些低級錯誤。為了將代碼規範的檢查放到前端開發工程中，可以利用 jslint 在提交代碼之前對代碼進行自動的 code lint。

Javascript 預處理

Javascript-* 語言

前端開發的核心是 Javascript，但是因為 Javascript 語言在設計上的種種不足，為了優化語言本身的問題，出現了很多試圖替代 Javascript 的語言，這其中如：

Coffeescript
Livescript
Typescript
React Jsx
Dart
Elm

這些語言在語法上都具有相應的優勢，如 Typescript 中提供靜態語法的一些強類型特性，Coffeescript, Livescript 提供現代化語言的語法糖特性，專門針對 xml 優化的 JSX 。這些語言最終都會編譯為 Javascript。

ES6

因為瀏覽器的實現大多還是 ES5 的標準，為了使用最新的 ES6 語法，通常的做法是採用 Babel 將 ES6 編譯為 ES5。

CommonJS

前端開發一直在追求模塊化，這個過程中出現了 AMD, CommonJs, Umd 這些模塊定義模式，簡單而言：

AMD（Asynchronous Module Definition）: 非同步模塊定義，可以非同步的載入或依賴其他模塊，支持的庫如 Require.js, Sea.js 。
CommonJs : 可以將 Javascript 按照 Node 模塊的方式定義
UMD: 為了兼容 AMD 還是 CommonJsx 風格，出現了 UMD

AMD 例子：

// myFubc.jsdefine(["jquery"], function ($) { function myFunc(){}; return myFunc;});

CommonJs 例子：

var $ = require("jquery");function myFunc(){};module.exports = myFunc;

UMD 例子：

(function (root, factory) { if (typeof define === "function" && define.amd) { // AMD define(["jquery"], factory); } else if (typeof exports === "object") { // Node, CommonJS-like module.exports = factory(require("jquery")); } else { // Browser globals (root is window) root.returnExports = factory(root.jQuery); }}(this, function ($) { function myFunc(){}; return myFunc;}));

其中，CommonJs 的風格是需要編譯的，最終會將多個模塊編譯為一個 UMD 方式定義的模塊。

一個前端項目可能同時用了 Es6 的語法和 CommonJs 的規範，以及 JSX 語言。所以前端開發需要 Javascript 的編譯過程，編譯的過程大多是在開發的時候，這個過程就是 Javascript 預處理。

CSS 預處理

和 Javascript 類似，也出現了一些 css-* 語言來優化 css 的開發過程，這些語言如：

less
sass

這些 css-* 語言同樣最終都會被編譯為原生的 css, 這個過程叫 Css 的預處理。

除了這類需求以外，因為瀏覽器的兼容問題，導致不得不在 css 上寫一些瀏覽器兼容的 hack, 為了自動解決這些 hack, 出現了一些工具如：

Autoprefixer
Compass

在預處理流程中可以加入這些預處理工具。

文件處理

通常一個前端項目會分有一個 src 目錄和 dist 目錄， src 放置源碼，dist 放置編譯後的代碼。所以在前端工程的流程中會涉及到文件的拷貝，刪除，移動等流程。

開發效率

通常的前端開發過程是，修改前端代碼，調用命令編譯代碼，然後瀏覽器 F5 刷新。這個過程可以做到自動化，通過代碼監控工具，指定要監控的目錄和文件，如果對應文件有改變，調用編譯工具編譯源碼，然後通過 livereload 自動刷新瀏覽器。

數據 mock

現代化前端項目開發大多是前後端分離的方式，也就是後端基本是提供 API 服務，在真實開發環境中，通常的問題是，後端 API 極其不穩定或者沒開發，為了不阻礙前端的開發，通常的做法是，前後端先約定 API 介面定義，然後前端根據定義 mock 介面。

對於大公司來說，可能有 mock 平台來實現這一功能，但對於小公司小項目來說，可能只能自己實現，我們可以利用一些開源的數據 mock 工具來在前端工程中實現。

域名代理

對於大型線上前端應用來說，mock 數據遠遠不夠，進入一個頁面可能需要多方的後端依賴，只能在真實環境中通過域名代理的方式實現開發和調試。

2.1.2 共享需求

對於公司和業務，快速高效的實現業務是終極追求，這對前後端都是挑戰。在前端團隊中，能夠形成基礎組件庫和業務組件庫是一種必然需求。

所以在設計前端項目架構的時候，一定要考慮業務的組件化和可共享性。

Base 基礎代碼共享
通用工具方法共享
基礎交互組件共享
業務組件共享

React 天然提供了組件的結構，只要在組件的開發過程中，注意組件的獨立性，很容易形成可重用的組件。

2.1.3 性能需求

web 應用的特點是，所有源碼的載入都需要通過網路，所以優化源碼的體積是提升首屏載入時間的關鍵，涉及到的一些點：

Javascript, Css 代碼壓縮
Javascript, Css 代碼合併
圖片壓縮
Css 圖片精靈或雪碧圖（css sprit）

這些過程都可以在前端工程的 build 過程中實現。

2.1.4 部署需求

一個前端工程通常是多人維護的，所以會用代碼管理工具(默認 git) 來管理源碼，然後將開發流程和部署流程和 git 結合起來。

多人分支協作流程：用 git flow 來管理代碼分支
代碼自動發布：git hook

2.1.5 前端工作流工具

為了解決前端工程中複雜的流程，出現了很多開源前端流程處理工具。這些工作流工具不僅僅是其本身，都是一個流程生態體系，每個工具都涉及到對應的插件庫，幾乎我們能想到的前端工程問題都有對用的插件能夠解決。

Grunt

Grunt 是最先流行起來的前端工程，其核心思想是基於配置的工作流模式，定義一個配置文件，聲明工作流各個環節的相關配置，調用 grunt 就能完成打包編譯

Broccoli

同樣是工作流工具，但其核心是以 tree 的基礎結構，提供極其高效穩定的工作流。

Gulp

目前 Gulp 幾乎已經取締 Grunt ，成為前端的默認流程工具，其核心思想是基於內存的流的方式，提供高效的性能，極簡的 API，定義不同的 task，然後將 task 串聯起來。

2.1.6 前端 Javascript 編譯工具

上面我們已經講到了 Javascript 的預處理，這裡詳細介紹一下幾個預處理工具

Babel

Use next generation JavaScript, Today

babel 的核心標語就是，現在就開始使用下一代的 Javascript , 我們可以在工程中使用 Es6, Jsx, 甚至是 Es7 的語法，最終這些語法都可以被編譯為 Es5。

Browserify

Browserify 是最先出現的 CommonJs 編譯工具，使得我們可以像寫 Node 模塊一樣寫前端代碼，Browserify 可以 build 使用 npm 中的所有模塊（只要模塊支持在前端中運行）

Webpack

Webpack 是支持 CommonJs 和 AMD 的模塊編譯工具，逐漸替代 Browserify, 基於 AMD 的好處就是代碼可以非同步話，這是 Browserify 無法做到的

最後

在本章中不會涉及到所有工具，會根據 React 的開發方式配置一個最合適的前端工程環境。主要是

JSX + Es6 + CommonJs
Webpack + Babel 做 Javascript 預處理
Gulp 做工作流