>[success] # 前端開發面臨的問題 ~~~ 1.想使用es6+新特性，但是卻不能很好的兼容瀏覽器 2.想使用 less/sass/postCss 增強css的編程性，但是瀏覽器是不支持這些的 3.想使用模塊化的方式開發提高項目維護性但是運行環境有些不能直接支持 4.上線前手動壓縮代碼和文件資源 5.統一大家的代碼風格 以上問題之前都是通過人為的方式解決，現在這些重復的工作被自動化完成這些瑣碎的步驟就是前端工程化的目的 ~~~ [工程化不錯的博客](https://www.yuque.com/kongdepeng/rgpm60/pt15oa) >[success] # 項目開發流程步驟 ~~~ 1.package.json 依賴管理文件 2.選擇 npm 或 Yarn 作為包管理器 3.確定項目技術棧 4.選擇構建工具，例如webpack 5.打通構建流程，通過安裝與配置各種 Loader 、插件和其他配置項 6.優化構建流程，針對開發/生產環境的不同特點進行各自優化 7.選擇和調試輔助工具，例如代碼檢查工具和單元測試工具，安裝相應依賴并調試配置文件。 8.編寫說明文檔 README.md package.json 1) npm 項目文件 package-lock.json 2) npm 依賴 lock 文件 public/ 3) 預設的靜態目錄 src/ 3) 源代碼目錄 main.ts 3) 源代碼中的初始入口文件 router.ts 3) 源代碼中的路由文件 store/ 3) 源代碼中的數據流模塊目錄 webpack/ 4) webpack 配置目錄 common.config.js 4) webpack 通用配置文件 dev.config.js 4) webpack 開發環境配置文件 prod.config.js 4) webpack 生產環境配置文件 .browserlistrc 5) 瀏覽器兼容描述 browserlist 配置文件 babel.config.js 5) ES 轉換工具 babel 配置文件 tsconfig.json 5) TypeScript 配置文件 postcss.config.js 5) CSS 后處理工具 postcss 配置文件 .eslintrc 7) 代碼檢查工具 eslint 配置文件 jest.config.js 7) 單元測試工具 jest 配置文件 .gitignore 8) Git 忽略配置文件 README.md 8) 默認文檔文件 ~~~ >[success] # 腳手架 [關于腳手架介紹的文章這個文章分上中下后續需要細讀一下](https://juejin.im/post/6844903928618811400) ~~~ 1.腳手架它原本是建筑工程術語，指為了保證施工過程順利而搭建的工作平臺，它為工人們在各層施工提供 了基礎的功能保障在軟件開發領域，腳手架是指通過各種工具來生成項目基礎代碼的技術。多個項目開發 流程大概率會有有相同內容，每個新項目都重復上面八個步驟是會讓項目反而變得繁瑣，比如相同文件目錄 ，相同的構建工具的配置，通過腳手架工具免去人工處理上的環節，輕松地搭建起項目的初始環境 2.腳手架的本質:'創建項目基礎結構、提供項目規范和約定'，舉個例子當我們每次搭建新的項目的時候 都需要可能有'相同的組織結構'，'相同的開發范式'，'相同的依賴（比如都用vue）'，'相同的基礎代碼' 每次這些相同的內容，腳手架就是為了解決在每開一次新的項目時候都要去手動構建，通過腳手架自動 生成一個項目骨架 3.針對框架本身的腳手架 -- vuecli / angular-cli / create-react-app，這類腳手架都是會根據項目創建時，通過 用戶選擇的配置生成對應的項目基礎結構，一般是針對特定自己的框架開發的 4.通用的腳手架 -- Yeoman，允許創建任何類型的應用程序。它允許快速開始新項目并簡化現有項目的維護。 5.Plop 是一個基于node js所開發的小工具，主要作用是根據模板代碼生成目標代碼 ~~~ >[danger] ##### 總結 ~~~ 1.對比幾個前端常見的工具更好的說明腳手架的作用 1.1.'yeoman'，項目結構模板。 1.2.'webpack'，代碼打包工具。 1.3.'grunt/gulp', 流程構建工具，和webpack有一定交集，但是定制性更強。 在建筑工程中腳手架的意思是為了保證各施工過程順利進行而搭設的工作平臺，'在編程'中可以最簡單的理解 就是創建一類通用項目的結構目錄基礎和通用的項目規范。 2.腳手架的意義： 雖然存在vuecli 這類腳手架只是會將公用一些文件目錄劃分好，但是涉及到實際開發需求場景，中會出現一部分 基礎代碼甚至業務代碼在相同類型項目時還是重復的，這個時候最笨的做法就是復制項目A，刪除部分代理 直流一個骨架，開發項目B，以此不停地迭代重復這時我們就可以把公共部分都放到腳手架工具當中生成， 讓腳手架工具發揮更大的價值 ~~~ >[danger] ###### 對vuecli 和react-script 兩個腳手架比較文章 [鏈接](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=416#/detail/pc?id=4415)