課程簡介
《前端基礎(chǔ)建設(shè)與工程化設(shè)計》課程從項目組織協(xié)同、依賴管理方案、核心技術(shù)選型、開發(fā)構(gòu)建工作流設(shè)計、工程化架構(gòu)思路、持續(xù)集成部署等角度出發(fā)，深度剖析前端基礎(chǔ)建設(shè)和工程化架構(gòu)的現(xiàn)代化方案。
課程中既有優(yōu)秀工程案例分析，也有源碼級深入解讀；既有工具鏈整合方案，也有體系化協(xié)同串聯(lián)。能夠幫助學(xué)習(xí)者快速理解工程化方案，進(jìn)而能夠打造自動化、智能化的基礎(chǔ)建設(shè)方案，以及順滑流暢的工作流機(jī)制。
目標(biāo)收益
? 理解業(yè)務(wù)開發(fā)中很少涉及到的編譯流程
? 從基礎(chǔ)建設(shè)和工程化角度，提升開發(fā)效率
? 從基礎(chǔ)建設(shè)和工程化角度，優(yōu)化應(yīng)用性能
? 開拓技術(shù)視野，理解現(xiàn)代化前端工程設(shè)計方案
? 脫離重復(fù)瑣碎的業(yè)務(wù)開發(fā)，系統(tǒng)地了解基礎(chǔ)建設(shè)的方方面面
? 理解前端構(gòu)建工具（如 Webpack）實現(xiàn)細(xì)節(jié)和原理
? 更好地從零搭建一個優(yōu)秀的項目，整合工作流程
培訓(xùn)對象
? 3 年以上經(jīng)驗的前端開發(fā)工程師
? 面臨技術(shù)瓶頸的前端團(tuán)隊
? 負(fù)責(zé)技術(shù)方案制定和基礎(chǔ)建設(shè)的資深工程師
? 缺少新技術(shù)指引、缺少接觸優(yōu)秀項目機(jī)會的前端團(tuán)隊
課程大綱
| 前端編譯原理知識介紹 |
– 解讀 AST（抽象語法樹） – 基于 AST，理解工程化雛形（實踐） |
| 前端生態(tài)和包管理方案解析 |
– NPM 原理解析 ? Yarn 方案介紹 – Package.json 重要字段介紹 |
| 串聯(lián)前端工具，打造自動化流程 |
– 構(gòu)建工具介紹和方案對比 – 解析 Babel 生態(tài) – Webpack 實踐指南（實踐） – Rollup 實踐指南（實踐） – 動手實現(xiàn)構(gòu)建工具（實踐） |
| 落地規(guī)范和測試方案，完善基礎(chǔ)建設(shè)流程 |
– Lint 方案解析 – 測試方案解析 – 綁定 Git hooks，融合 Prettier, ESLint 以及測試方案（實踐） |
| 抽象基礎(chǔ)建設(shè)，提供工程一體化方案 |
– Create-react-app 原理解析 – 實現(xiàn)企業(yè)級腳手架 |
| 現(xiàn)代化工程方案原理介紹和實踐 |
– Tree shaking 優(yōu)化原理和實踐（實踐） – 優(yōu)化代碼分割方案，解析按需加載和打包（實踐） – 解析壓縮和混淆 – 通過構(gòu)建分析，提升開發(fā)效率和應(yīng)用性能（實踐） – 無打包方案原理與實踐（實踐） – Monorepo 架構(gòu)設(shè)計 – 漫談 CI/CD 與 DevOps |
|
前端編譯原理知識介紹 – 解讀 AST（抽象語法樹） – 基于 AST，理解工程化雛形（實踐） |
|
前端生態(tài)和包管理方案解析 – NPM 原理解析 ? Yarn 方案介紹 – Package.json 重要字段介紹 |
|
串聯(lián)前端工具，打造自動化流程 – 構(gòu)建工具介紹和方案對比 – 解析 Babel 生態(tài) – Webpack 實踐指南（實踐） – Rollup 實踐指南（實踐） – 動手實現(xiàn)構(gòu)建工具（實踐） |
|
落地規(guī)范和測試方案，完善基礎(chǔ)建設(shè)流程 – Lint 方案解析 – 測試方案解析 – 綁定 Git hooks，融合 Prettier, ESLint 以及測試方案（實踐） |
|
抽象基礎(chǔ)建設(shè)，提供工程一體化方案 – Create-react-app 原理解析 – 實現(xiàn)企業(yè)級腳手架 |
|
現(xiàn)代化工程方案原理介紹和實踐 – Tree shaking 優(yōu)化原理和實踐（實踐） – 優(yōu)化代碼分割方案，解析按需加載和打包（實踐） – 解析壓縮和混淆 – 通過構(gòu)建分析，提升開發(fā)效率和應(yīng)用性能（實踐） – 無打包方案原理與實踐（實踐） – Monorepo 架構(gòu)設(shè)計 – 漫談 CI/CD 與 DevOps |
近期公開課推薦
