目錄
- 工程化概述
- 工程化主要解決的問題
- 工程化的表現(xiàn)
- 工程化 != 某個(gè)工具
- 一些成熟的工程化集成
- 腳手架工具
- 腳手架的本質(zhì)作用
- 常用的腳手架工具
- 腳手架工作原理
- 腳手架工作過程
- 開發(fā)一個(gè)腳手架
工程化概述
工程化主要解決的問題
- 想要使用
ES6+新特性，但是兼容有問題（傳統(tǒng)語言或語法的弊端） - 想要使用
Less/Sass/PostCSS增強(qiáng)CSS的編程性嚷往，但是運(yùn)行環(huán)境不能直接支持 - 想要使用模塊化的方式提高項(xiàng)目的可維護(hù)性，但運(yùn)行環(huán)境不能直接支持（無法使用模塊化、組件化）
- 部署上線前需要手動(dòng)壓縮代碼及資源文件原献，部署過程需要手動(dòng)上傳代碼到服務(wù)器（重復(fù)的機(jī)械式工作）
- 多人協(xié)作開發(fā)，無法硬性統(tǒng)一大家的代碼風(fēng)格，從倉庫
pull回來的代碼質(zhì)量無法保證（代碼風(fēng)格不統(tǒng)一，質(zhì)量無法保證） - 部分功能開發(fā)時(shí)需要等待后端服務(wù)接口提前完成
- 整體依賴后端項(xiàng)目
工程化的表現(xiàn)
- 創(chuàng)建項(xiàng)目 （使用腳手架完成基礎(chǔ)工具的搭建）
- 編碼（代碼格式化傅寡、代碼風(fēng)格校驗(yàn)，編譯工具可以將使用的新特性自動(dòng)編譯可運(yùn)行的語言）
- 預(yù)覽/測試（
Web Server/Mock前端服務(wù)器北救、Live Reloading/HMR熱更新荐操、Source Map定位源代碼位置） - 提交（
Git Hooks代碼整體質(zhì)量檢查、Lint-staged代碼風(fēng)格檢查珍策，持續(xù)集成） - 部署（
CI/CD托启、自動(dòng)發(fā)布）
工程化 != 某個(gè)工具
工具不是工程化的核心。工程化的核心是對項(xiàng)目整體的規(guī)劃和架構(gòu)膛壹。而工具只是幫我們實(shí)現(xiàn)規(guī)劃和架構(gòu)的一種手段驾中。
以一個(gè)普通的項(xiàng)目為例唉堪，規(guī)劃一個(gè)項(xiàng)目整體的工作流架構(gòu)模聋，包括規(guī)劃文件的組織結(jié)構(gòu)，源代碼的開發(fā)范式唠亚、通過什么方式進(jìn)行前后端分離链方。這些確定之后再考慮用那些工具，實(shí)現(xiàn)我們對整個(gè)項(xiàng)目的整體規(guī)劃灶搜。
一些成熟的工程化集成
下面創(chuàng)建的并不只是項(xiàng)目祟蚀，還有一些目錄規(guī)范、集成工具等其他的工程化解決方案割卖。
- create-react-app
- vue-cli
- angular-cli
- gatsby-cli
前端工程化是由
node.js強(qiáng)力驅(qū)動(dòng)的前酿，Node.js居于首功。
腳手架工具
腳手架的本質(zhì)作用
創(chuàng)建項(xiàng)目基礎(chǔ)結(jié)構(gòu)鹏溯、提供項(xiàng)目規(guī)范和約定（相同的組織結(jié)構(gòu)罢维、開發(fā)范式、模塊依賴丙挽、工具配置肺孵，更有一些基礎(chǔ)代碼都相同）
IDE創(chuàng)建項(xiàng)目的過程就是一個(gè)腳手架的工作流程
常用的腳手架工具
-
React項(xiàng)目 ——create-react-app -
Vue項(xiàng)目 ——vue-cli -
Angular項(xiàng)目 ——angular-cli Yeoman通用腳手架工具Plop同于創(chuàng)建特定類型的文件
腳手架工作原理
腳手架工具就是一個(gè)node的CLI應(yīng)用，創(chuàng)建腳手架就是創(chuàng)建一個(gè)CLI應(yīng)用颜阐。在啟動(dòng)過后平窘，會(huì)自動(dòng)詢問預(yù)設(shè)的問題，根據(jù)回答的結(jié)果根據(jù)一些模板文件凳怨，生成一個(gè)項(xiàng)目結(jié)構(gòu)瑰艘。
腳手架工作過程
- 通過命令行交互詢問用戶問題(
node中發(fā)起交互命令我們使用inquirer模塊) - 根據(jù)用戶回答的結(jié)果生成文件（入口文件中進(jìn)行邏輯實(shí)現(xiàn)）
