前端模塊打包器的開(kāi)發(fā)實(shí)踐1:需求分析
前端模塊化現(xiàn)狀
分類(lèi):以Webpack,browserify的靜態(tài)分析 VS RequireJS amd模塊
(es6 的模塊我認(rèn)為還是一種語(yǔ)法糖而已,在前端瀏覽器的支持還長(zhǎng)時(shí)間地需要轉(zhuǎn)換器的轉(zhuǎn)換)
靜態(tài)分析以使用CommonJS方式組織代碼,指定入口文件,默認(rèn)將所依賴(lài)的代碼合并到同一個(gè)文件中去,文件發(fā)送請(qǐng)求少。而且有一個(gè)最重要的好處就是Webpack自帶的Code Splitting 代碼分割可以允許開(kāi)發(fā)者將不同的代碼組織在一起,符合前端組件化的需求。
amd模塊的模塊編寫(xiě)方式是遵守amd規(guī)范的,然后通過(guò)loader(加載器)將模塊按需加載。模塊是分散的。
(這里討論問(wèn)題時(shí)候只著眼于重點(diǎn))
不足就是相互的優(yōu)點(diǎn):
靜態(tài)分析的Webpack , 在按需加載的實(shí)現(xiàn)頗為麻煩,甚至有一點(diǎn)不可行
amd模塊的編寫(xiě),文件請(qǐng)求次數(shù)多,只有單次依賴(lài)的模塊需要發(fā)起單獨(dú)請(qǐng)求。文件組織形式(由于amd模塊沒(méi)有考慮Css模塊,Html模塊的加載,在如今前端組件化組織的前景下逐漸沒(méi)意義了)唯一是Js.
需求分析
代碼分割,優(yōu)點(diǎn)就是能夠?qū)tml Css Js 組織在同一個(gè)文件之中。
代碼局部作用域
(上述都是組件化的需要)
模塊及依賴(lài)打包(模塊粒度的控制)
模塊的層級(jí):
全局
局部
私有
全局一般是外部庫(kù), 自己寫(xiě)的公有庫(kù);局部是在某幾個(gè)組件都使用的庫(kù) ;私有:只是用一次的庫(kù)
最近很多人都在使用SPA的開(kāi)發(fā)方式,但是,SPA+Router不就是MPA嗎?
由于將模塊層次分割出來(lái),這就有了中間層(局部)模塊的按需加載需求了
正因?yàn)榘葱杓虞d,所以有必要使用規(guī)范的模塊格式
模塊及依賴(lài)的識(shí)別,以及生成模塊樹(shù)
綜上所述,我們形象地說(shuō)希望構(gòu)建Webpack+RequireJS的一個(gè)工具


