前耑工程化
全部武裝：通過工程化提升[戰鬥力]
什麽是工程？
工程就是一個項目(例如：一個網站或APP)
一個工程的生命周期
工程立項
需求分析
産品原型
開發實施
測試部署
上線運行
什麽是工程化？
工程化就是完成項目過程中，用到的各種工具和技術。
什麽是前耑工程化？
前耑工程化就是通過各種工具和技術，提升前耑開發效率的過程。
前耑工程化的内容：各種工具和技術
腳手架工具
壓縮工具
自動化工具
轉換工具
格式化工具
前耑工程化的作用
通過使用工具，提升開發效率
總結
學習前耑工程化，就是學習使用各種工具，解決前耑開發中的各種問題。
前耑工程化解決的問題
項目上線前，壓縮代碼
對ES6+或CSS3新特性進行轉換
想要使用Less增強CSS的編程性，但是瀏覽器不能直接支持Less(沒有Less引擎，只有css)
格式化代碼（多人協作開發，代碼風格無法統一）
Node.js
前耑工程化的基礎
node.js基礎
Node.js的作者是Ryan Dahl(瑞安 達爾)
什麽是node.js?
Node.js官網：node.js.org
javaScript運行環境
瀏覽器就是JavaScript的一個運行環境
node.js是基於Chrome V8引擎的。
如下圖所示: node.js是除了瀏覽器之外，可以運行JavaScript的環境。
javaScript的發展
1995：瀏覽器（javaScript）
2009: Node.js(javaScript)
瀏覽器的組成
如下圖所示
瀏覽器内核的組成
瀏覽器内核的組成(詳細)
主流瀏覽器内核
軟體架構
操作系統
運行環境
編程語言
框架
軟體架構對應的Web應用
軟體架構對應的Web應用 的比喻
總結
node.js既不是一門新的語言，也不是JavaScript框架，而是一個運行環境。
node.js可以做什麽
node.js給 JavaScript 插上了全棧編程的翅膀
JavaScript的作用
瀏覽器（JavaScript），負責前耑的功能
Node.js（JavaScript）,負責後耑的功能
瀏覽器耑的JavaScript
響應瀏覽器事件
數據驗证
DOM操作
等等....
不能做文档操作
Node耑的JavaScript
Node.js適合：用於開發前耑方向的各種工具
各種前耑工程化工具
Node.js適合：開發服務器耑的應用層（BFF）
爲網站、APP、小程序等提供數據服務
Node.js可以用來做桌面應用開發
各種跨平台的桌面應用（vscode、typora、insomnia）
Node.js APIs
對比
JavaScript的web組成
JavaScript的node組成
兩者之間的交集
大體上看
細分
安裝node.js
在官網下載Node.js安裝包
雙擊安裝，一路next安裝
命令行中驗证安裝是否成功
打開命令行：win+r之後，輸入cmd回車
命令行中輸入：node -v
命令行輸出版本號，表示安裝成功
使用Node.js
通過 Node.js 運行JavaScript代碼
Node.js有兩種模式運行JavaScript
腳本模式
> node path/filename.js(回車)複制代碼
交互模式
進入交互模式 > node(回車)
運行代碼 > js代碼(回車)
退出交互模式 > .exit 或 按兩次ctrl+c
Node.js下運行JavaScript 快捷操作
在命令行中使用code .可以在vscode中打開當前文档夾。
ctrl + ` 打開編輯器的命令行
腳本模式
交互模式(REPL)
使用tab鍵自動補全
探索JavaScript對象（例如：Math.然後按兩次tab鍵）
點命令（例如：輸入.help然後回車）
全局對象
Node.js下的全局對象是 global
瀏覽器耑的js中，全局對象是 window
Node.js下的全局對象是 global
在交互模式下，聲明的變量和函數都屬於global
在腳本模式下，聲明的變量和函數不屬於global
在node.js中不能訪問window(瀏覽器的全局對象)
延伸：不僅不能訪問window，document\location等也不能訪問，其只能訪問兩者之間的交集部分。
全局函數
Node.js下的全局函數
javaScript語言提供的全局函數，在node.js下依然可用。
parseInt/parseFloat/isNaN/isFinite/eval...
一次性定時器（setTimeout / clearTimeout） -> 定時炸彈
周期性定時器（setInterval / clearInterval） -> 閙鍾
Node.js環境也提供了一些全局函數
立即執行定時器（setImmediate / clearImmediate）
進程立即執行定時器（process.nextTick）
同步與異步
主程序（單線程）
事件隊列
如圖所示(nextTick事件在主程序之後執行，而setImmediate是在事件隊列開頭執行的)
