前端工程化是近幾年比較熱門的一個東西，大大小小的團隊也在朝著這一方向發展，那麽你的團隊做了多少呢？

前端發展簡史

• 石期時代

最初的前端頁面都是一些靜態頁面，人們看到的網頁就像報紙一樣。

• 青銅時代

後端為主的時代，往往頁面都是後端利用一些模版引擎來完成頁面；對於有大量頁面的項目，前端在寫頁面需要構造一定的環境，比如jsp，php等。

• 鐵器時代

隨著ajax的誕生，瀏覽器可以主動從服務端拉取數據，前後端分離的時代到來，SPA應運而生，前端可以處理一些復雜的交互、業務邏輯。

• 工業時代

隨著前端扮演的角色越來越重要，各種SPA框架層出不窮；nodejs的活躍也為前端帶來了更有利開發方式以及更多的發展方向。

前端工程化需要做哪些？

• 代碼管理工具

目前來看大多數都是git/svn，當然還是推薦使用git，好處自然不用說。

• 項目創建、開發、發布

項目創建包含了技術選型，目錄結構設計，模塊化等。開發中可能會遇到頁面適配、樣式預處理以及開發便捷性。發布涉及到了代碼打包、發布到服務器，你可能還會做一些打包優化等等。

• 前端自動化工具

對於前端工具這個就很繁雜了，比如圖片壓縮、開啟本地服務代理等等。

當然前端工程化遠不止於此，還有單元測試、規範制定等，本文主要梳理開發中最常見的幾個環節，看看大家目前的狀態是什麽樣子的？有哪些可以做改進。畢竟茹毛飲血不是我們想要的！

在前端開發中“你”是怎麽做的？

• 項目創建

  開發一個項目，首先要創建項目，大概收集了幾種方式
  1. copy後修改一下。
  2. git clone -> npm install -> npm start（克隆自己的空項目開發）。
  3. 使用框架官方腳手架（vue-cli， Angular-cli，create-react-app），然後再改改。
  4. 有自己的腳手架構建器，統一管理（一般是有大牛發力）。
     對於前端項目，我們需要做的有很多，比如要適配各種移動端機型，要兼容低版本，想用sass/less，還想用es6甚至是ts，對自己嚴格要求加個eslint等等，如果你還處於1，2，3情況，那麽這些東西每次開發新項目都要重新來一遍，如果你很熟練，可能個把小時就弄好了，否則可能創建項目就要半天。

• 項目構建

  項目構建目前來說基本都是使用webpack，但是其復雜的配置、版本叠代速度讓很多開發望而生畏，甚至誕生處理webpack配置工程師（有這個的真牛批??）。
  但是我們依然需要開發構建和打包構建能提供一些能裏，比如開發熱更新，各種預處理，結合性能優化所需要的一些配置（雪碧圖，代碼分割，壓縮，cdn），多頁配置，當項目很大的時候我們還需要優化構建速度。突然發現開發完業務功能還有一堆的事情要做，如果沒有相關經驗積累真是頭大。

• 前端工具
  nodejs的盛行給前端開發帶來了更多的便捷，各種npm包，node工具。對於工具這一塊TJ大神寫的 commander.js讓我們更加便捷的開發命令式工具，常見的腳手架初始化、代碼轉化等，真的算是一個神器了。
  但是，不得不說，開發還是有一定的技術要求的，註冊命令就要寫一堆東西，還有參數解析；而且如果我們有多個工具，直接這麽來寫是很不方便管理的，比如我想查看有哪些是我們自己開發的命令。

適合自己的工作流

上面僅僅是介紹了關於項目開發中的問題，隨著前端重要性越來越大，工作量也是與日俱增，而前端工程化正是幫助我們優化流程、減少工作量，因此擁有自己的前端工作流勢在必行。
講了這麽多，給大家推薦一個不錯的前端工作流工具feflow，利用這個工具，從創建項目到業務開發，再到打包發布，涵蓋了整個完整的工作流程。

• 腳手架和構建器
  官方有給出react+redux的腳手架以及基於webpack4的構建器，而且還可以根據官方文檔自定義自己的腳手架和構建器，對於不同的框架和業務都可以完美的接入。
• 插件體系
  此外feflow還提供了豐富的插件體系，你可以自定義各種插件，通過feflow 命令來調用：

feflow.cmd.register('add', '加法運算器', function(args) {
    add(args._);
});
function add (args) {
    const sum = args.reduce((sum, item) => {
        return sum + item
    }, 0)

    console.log(sum)
    return sum
}

# 調用
feflow add 1 2 3
# 輸出
 6

是不是很簡單，並且命令都是可控的（feflow 控制下）。

結語

不管用什麽工具方法，目的都是為了優化工作流程，讓我們輕松高效的完成工作。最後附上feflow官網http://www.feflowjs.org/。

前端工程化，你做了多少？