模塊化打包工具為什么出現 · 前端工程化學習筆記

>[success] # 模塊化打包工具出現 1. 前端在整個歷史的演變，最后提出的解決方案是**esm**,使得前端可以解決以前模塊化里程的各種問題，這些問題解決的都是**開發階段多文件的劃分的模塊化**，但是在實際正式環境然需要考慮下面幾個問題 * **ES Modules** 存在環境兼容問題這個問題隨著**時間推移將會被解決** * 模塊**文件過多**，網絡**請求頻繁**，影響工作效率，模塊化導致問題就是我們會細致的劃分文件，導致文件請求變多，這個解決方法也**可以通過http2 /http3 來解決** * 所有的前端資源都需要模塊化，現有的**esm只是把js 進行了模塊化**，但是前端是由**css,圖片,字體**這些個個文件組成，因此需要模塊化的是前端**所有資源不是單單的js文件** * 前端三大框架里，例如React的JSX，VUE和Angular的指令都是瀏覽器無法識別的，需要編譯 * 在CSS開發中，我們已經習慣使用**less、sass**等預編譯工具，有了構建工具做編譯轉化，可以讓我們開發效率更高，代碼更好維護。 * .前端必不可少要使用圖片等多媒體資源，構建工具可以對它們**進行壓縮** * 代碼**不會被輕易識別和可讀**，需要構建工具對代碼進行**壓縮和混淆** 2. 解決上面問題就需要引入新的前端開發工具 * 新特性代碼編譯，將包含新特性代碼轉換成大多數瀏覽器能夠兼容的代碼如**ES6 => ES5**，這些可以通過**glup 這些自動化構建工具幫助實現** * **解決文件過多，導致請求過多的問題**，我們可以設想在開發階段依舊是模塊化多文件的形式，但是在打包的時候，可以講過這些模塊化的**文件打包成一個文件** * **支持不同種類的前端資源類**型，可以將其當作模塊使用 >[info] ## 關于模塊劃分 1. 首先明確一個前提**模塊化開發只是在開發階段需要的**，實際業務上線后對項目正常運行拋開優化來說本質是沒有影響的，如果采用過多的模塊化開發，就以瀏覽器支持的esm 的形式為例因為**模塊劃分越細導致瀏覽器請求越多**反而可能出現**速度變慢**的情況，這就是為什么我們需要打包工具有時候**將一些js 文件統一生成一個Bundle.js** >[danger] ##### 案例說明 * 雖然看似之引入了**一個script 標簽**但實際**相互關聯的esm 依舊會加載** ~~~ ├── src │ ├── heading.js │ └── index.js └── index.html ~~~ * ./src/heading.js ~~~ // ./src/heading.js export default () => { const element = document.createElement('h2') element.textContent = 'Hello webpack' element.addEventListener('click', () => alert('Hello webpack')) return element } ~~~ * ./src/index.js ~~~ // ./src/index.js import createHeading from './heading.js' const heading = createHeading() document.body.append(heading) ~~~ * index.html ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack - 快速上手</title> </head> <body> <script type="module" src="src/index.js"></script> </body> </html> ~~~ * 實際加載 ![](https://img.kancloud.cn/93/ae/93aec929adb2db064e3801cb3fcc2167_448x148.png) >[info] ## 解決問題將上述歸總的問題進行解決， **js 模塊化的代碼在打包生成階段編程es5語法**，**這些模塊化后會導致請求文件變多的js統一給他們生成在一個js文件中Bundle.js**,并且**不單單的對js 進行模塊化**，會對不同種類的前端資源類型**支持就像css ,圖片，文字** ![](https://img.kancloud.cn/45/18/45184c520f7136ce4c9c9047500e4930_1267x681.png) 因此模塊化工具解決的問題期望具備的雛形 * 能夠將散落的**模塊打包到一起** * **能夠編譯代碼中的新特性** * 能夠**支持不同種類的前端資源模塊** >[danger] ##### 前端模塊化工具 1. webpack - 模塊打包器 2. rollup - ES Modules 打包器 >[info] ## 參考 [知識獲取位置](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2262)