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

故園苒苒發表於2019-01-28
前端

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

前端發展簡史

  • 石期時代

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

  • 青銅時代

後端為主的時代，往往頁面都是後端利用一些模版引擎來完成頁面；對於有大量頁面的專案，前端在寫頁面需要構造一定的環境，比如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/。

相關文章