前端工程化,你作了多少?

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

前端發展簡史

  • 石期時代

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

  • 青銅時代

後端爲主的時代,每每頁面都是後端利用一些模版引擎來完成頁面;對於有大量頁面的項目,前端在寫頁面須要構造必定的環境,好比jsp,php等。vue

  • 鐵器時代

隨着ajax的誕生,瀏覽器能夠主動從服務端拉取數據,先後端分離的時代到來,SPA應運而生,前端能夠處理一些複雜的交互、業務邏輯。node

  • 工業時代

隨着前端扮演的角色愈來愈重要,各類SPA框架層出不窮;nodejs的活躍也爲前端帶來了更有利開發方式以及更多的發展方向。react

前端工程化須要作哪些?

  • 代碼管理工具

目前來看大多數都是git/svn,固然仍是推薦使用git,好處天然不用說。webpack

  • 項目建立、開發、發佈

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

  • 前端自動化工具

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

固然前端工程化遠不止於此,還有單元測試、規範制定等,本文主要梳理開發中最多見的幾個環節,看看你們目前的狀態是什麼樣子的?有哪些能夠作改進。畢竟茹毛飲血不是咱們想要的!github

在前端開發中「你」是怎麼作的?

  • 項目建立web

    開發一個項目,首先要建立項目,大概收集了幾種方式

    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/。

相關文章
相關標籤/搜索