目錄
- 工程化概述
- 工程化主要解決的問題
- 工程化的表現
- 工程化 != 某個工具
- 一些成熟的工程化集成
- 腳手架工具
- 腳手架的本質作用
- 常用的腳手架工具
- 腳手架工作原理
- 腳手架工作過程
- 開發一個腳手架
工程化概述
工程化主要解決的問題
- 想要使用
ES6+新特性，但是兼容有問題（傳統語言或語法的弊端） - 想要使用
Less/Sass/PostCSS增強CSS的編程性，但是運行環境不能直接支持 - 想要使用模塊化的方式提高項目的可維護性，但運行環境不能直接支持（無法使用模塊化、組件化）
- 部署上線前需要手動壓縮代碼及資源文件，部署過程需要手動上傳代碼到服務器（重複的機械式工作）
- 多人協作開發，無法硬性統一大家的代碼風格，從倉庫
pull回來的代碼質量無法保證（代碼風格不統一，質量無法保證） - 部分功能開發時需要等待後端服務接口提前完成
- 整體依賴後端項目
工程化的表現
- 創建項目 （使用腳手架完成基礎工具的搭建）
- 編碼（代碼格式化、代碼風格校驗，編譯工具可以將使用的新特性自動編譯可運行的語言）
- 預覽/測試（
Web Server/Mock前端服務器、Live Reloading/HMR熱更新、Source Map定位源代碼位置） - 提交（
Git Hooks代碼整體質量檢查、Lint-staged代碼風格檢查，持續集成） - 部署（
CI/CD、自動發佈）
工程化 != 某個工具
工具不是工程化的核心。工程化的核心是對項目整體的規劃和架構。而工具只是幫我們實現規劃和架構的一種手段。
以一個普通的項目爲例，規劃一個項目整體的工作流架構，包括規劃文件的組織結構，源代碼的開發範式、通過什麼方式進行前後端分離。這些確定之後再考慮用那些工具，實現我們對整個項目的整體規劃。
一些成熟的工程化集成
下面創建的並不只是項目，還有一些目錄規範、集成工具等其他的工程化解決方案。
- create-react-app
- vue-cli
- angular-cli
- gatsby-cli
前端工程化是由
node.js強力驅動的，Node.js居於首功。
腳手架工具
腳手架的本質作用
創建項目基礎結構、提供項目規範和約定（相同的組織結構、開發範式、模塊依賴、工具配置，更有一些基礎代碼都相同）
IDE創建項目的過程就是一個腳手架的工作流程
常用的腳手架工具
-
React項目 ——create-react-app -
Vue項目 ——vue-cli -
Angular項目 ——angular-cli Yeoman通用腳手架工具Plop同於創建特定類型的文件
腳手架工作原理
腳手架工具就是一個node的CLI應用，創建腳手架就是創建一個CLI應用。在啓動過後，會自動詢問預設的問題，根據回答的結果根據一些模板文件，生成一個項目結構。
腳手架工作過程
- 通過命令行交互詢問用戶問題(
node中發起交互命令我們使用inquirer模塊) - 根據用戶回答的結果生成文件（入口文件中進行邏輯實現）