了解前端工程化

本階段主要以工程化為主題，分別從腳手架、自動化、模組化、規範化四個角度介紹前端工程化具體如何實踐，以此應對複雜應用的開發過程，提高開發效率，降低維護成本，從而更適應大前端時代下的前端開發工作。

1.想使用es6+新特性,但是有相容性問題

2.想使用less/sass/postcss增強css的程式設計性時,執行環境不能直接支援

3.想要使用模組化的方式提高專案的可維護性時,執行環境不能直接支援

4.部署上線前需要手動壓縮**及資源檔案,部署過程需要手動上傳**到伺服器

5.多人協同開發時,無法硬性統一大家的**風格.pull回來的**質量無法得到保證

6.部分功能開發時,需要等待後端伺服器介面提前完成才能去做具體的編碼

1.傳統語言或語法的弊端

2.無法使用模組化/元件化

3.重複的機械式工作

4.**風格統一,質量保證

5.依賴後端服務介面支援

6.整體依賴後端專案(強依賴)

一切以提高效率,降低成本,質量保證為目的的手段都屬於工程化

工具並不是工程化的核心,工程化是對專案的一種規劃和架構.而工具只是落地這種架構的手段.

工程化主要由node js強力推動,它主要內容涉及到已下幾點

腳手架的本質作用是建立專案基礎結構,提供專案規範和相同的約定,比如

ide建立專案的過程就是乙個腳手架的工作流程,如android studio或者vs studio等,本文主要通過以下幾點系統學習腳手架工具

目前市場上已經有很多腳手架工具了,但大多數都是為了特例專案型別服務的,它們都是根據資訊建立對應的專案基礎結構.例如

vue專案中的vue-cli

angular專案中的angular-cli

還有一類是以構建專案為目標,以***yeoman***為代表的通用型專案腳手架工具,它可以根據乙個模板生產乙個對應的專案結構,這種型別的腳手架一般都比較靈活而且很容易擴充套件.

還有一類也很具有代表性叫plop***,它們主要用於在專案開發過程*中去建立一些特定型別的檔案,例如建立乙個元件/模組所需要的檔案

yeoman 是一種老牌,高效,靈活的web 應用腳手架搭建系統,使用yeoman可以搭配任意一種型別的generator,我們可以通過建立自己的generator去打造一款屬於自己的腳手架.但是yeoman它過於靈活以至於許多基於框架開發的人眼中認為它不夠專注,但這並不妨礙我們去學習它.

當需要在已生成好的專案下再生成一些檔案,就可以用到子集生成器generator

檔案作為generators的核心入口

//需要匯出乙個繼承 yeoman-generator的型別
//yeoman-generator在工作時會自動呼叫我們在此型別中定義的一些生命週期方法
//我們在這些方法中可以通過呼叫父類提供的一些工具方法實現一些功能,如檔案寫入
const generator =
require
('yeoman-generator'
)module.exports =
class
extends generator 
}

相對於手動建立每乙個檔案,模板的方式大大提高了效率

這是foo.txt檔案的內容 它是乙個模板檔案

內部可以使用ejs模板標記輸出資料
例如:<
%= title %
>
其他的ejs語法也支援
<%if
(success)
%>

const generator =

require
('yeoman-generator'
)module.exports =
class
extends generator 
this
.fs.
copytpl
(tmpl,output,context)
}}

對於模板中的動態資料,例如專案的名稱和標題一般使用命令列互動的方式去詢問試用者從而得到.可以通過generator中的prompting實現.

const generator =

require
('yeoman-generator'
)module.exports =
class
extends generator ])
.then
(answers=>
this
.answers = answers
})}writing()
}

前端工程化

為什麼出現了前端工程化？09年之前，我們學習的css，div，js只是對頁面設計進行乙個打輔助的功能，當時只能勉強的成為頁面設計師，為什麼會出現前端工程師 1.突然間前端的需求逐漸增多，使用者對介面的要求越來越高，前端範疇越來越大。2.前後端總是保持一致才能進行開發，不能分開開發，提出前端工程化，也...

前端工程化

一 什麼是前端工程化 根據業務特點，將前端開發流程規範化 標準化 包括開發流程 技術選型，規範，構建發布等用於提公升前端工程師開發效率和 質量，提高產品的質量。實現前端工程化的目的 就是通過流程規範 自動化工具來提公升前端的開發效率 效能 質量 多人協作能力以及開發體驗。前端工程化體系分為 元件化 ...

前端工程化

老大考慮到團隊成員學習的曲線，最終選擇thunk 為了更方便團隊人員使用，封裝直接的thunk，和cobinereducer 1 專案分為四大塊，服務治理，資源治理，診斷除錯，分析管理 幾十個元件，不可能將所有的狀態解除安裝乙個reducer裡面來管理 不利於維護 然後因為封裝了元件thunk所以要...