一、背景

如果你和我一樣，之前對于前端打包工具的發(fā)展一無所知，甚至于不知道這些工具出現(xiàn)的必要性。你可以瀏覽此部分的內容，如果你不想知道這些或者對這些并不感興趣，可以直接跳過此部分。

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機托管四川主機托管成都服務器托管四川服務器托管，支持按月付款！我們的承諾：貴族品質、平民價格，機房位于中國電信/網(wǎng)通/移動機房，服務器機柜租賃服務有保障！

互聯(lián)網(wǎng)程序現(xiàn)狀

隨著移動互聯(lián)的來襲，當前越來越多的網(wǎng)站已經(jīng)從單純的網(wǎng)頁模式，開始升級為webapp模式。它們運行在現(xiàn)代的瀏覽器中，使用HTML5、CSS3、ES6等技術開發(fā)，已經(jīng)從單一的瀏覽功能轉變?yōu)橐粋€基于瀏覽器的富客戶端。并且webapp通常是一個SPA(Single Page Application 單頁面應用)。每個頁面（View）通過異步的方式加載，有著良好的用戶體驗。但是這樣做的結果是導致程序初始化和使用的過程中需要更多、更復雜的JavaScript代碼來實現(xiàn)，這就對前端程序的開發(fā)帶來巨大的挑戰(zhàn)！

模塊化系統(tǒng)的演變

隨著程序的復雜性的增加，項目結構的龐大。把單一js文件按職責進行模塊化劃分。

我們在寫頁面的時候會這樣寫：

這是最基礎的JavaScript加載方式，每個JS的所有方法和屬性都是暴露在window對象中的（就像把所有代碼都放在一個命名空間或者同一個包下），借助全局對象，我們就能使用這些屬性和方法。如果更為復雜的程序會使用命名空間的概念來組織這些模塊的接口，比如：YUI

這種開發(fā)方式帶來的弊端：

• 全局的作用域下容易造成變量的相互沖突（這是一個很常見的問題）

• 文件只能按照