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

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

前端發展簡史

• 石期時代

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

• 青銅時代

後端爲主的時代，每每頁面都是後端利用一些模版引擎來完成頁面；對於有大量頁面的項目，前端在寫頁面須要構造必定的環境，好比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/。