這篇文章主要講解了“怎么理解web前端中的Rollup”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么理解web前端中的Rollup”吧！

創(chuàng)新互聯(lián)基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)多線BGP機(jī)房報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

rollup是一個(gè)JavaScript模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，其源碼中模塊的導(dǎo)入導(dǎo)出采用的是ES6模塊語(yǔ)法，即源碼需要采用ES6語(yǔ)法進(jìn)行編寫。

rollup與webpack的對(duì)比:

rollup只能處理js模塊，而webpack可以處理任何資源，可以把所有的資源都當(dāng)成模塊進(jìn)行處理。

rollup多適用于類庫(kù)的打包，打包的代碼需要供他人使用，webpack多適用于應(yīng)用的打包。

rollup一般不會(huì)產(chǎn)生額外的代碼(除了必要的cjs,umd頭外)，所以rollup打包出來(lái)的代碼執(zhí)行更快、可讀性更強(qiáng)，webpack由于功能強(qiáng)大，所以會(huì)產(chǎn)生很多額外的代碼、打包出來(lái)的文件較大、執(zhí)行較慢、可讀性較差

rollup會(huì)將所有資源放同一個(gè)地方，一次性加載,利用tree-shake特性來(lái)剔除未使用的代碼，減少冗余，而webpack則是拆分代碼、按需加載

rollup安裝與基本使用

要使用rollup，需要在全局進(jìn)行安裝，如:

//全局安裝rollup

>sudonpminstall--globalrollup

rollup安裝完成后，就可以通過(guò)rollup命令進(jìn)行打包了:

①rollup模塊入口文件:

//進(jìn)入項(xiàng)目根目錄下，并以src目錄下的index.js作為模塊入口進(jìn)行打包

>rollup./src/index.js

此時(shí)可以看到直接在控制臺(tái)中輸出了模塊打包結(jié)果，因?yàn)闆](méi)有指定將打包結(jié)果輸出到哪個(gè)文件下，所以會(huì)直接輸出打包結(jié)果到控制臺(tái)中。

②指定模塊輸出，--file

//將打包結(jié)果輸出到當(dāng)前目錄下的bundle.js文件中

>rollup./src/index.js--filebundle.js

③指定打包后的模塊輸出格式，--format

//將模塊打包成iife格式，即將模塊放到匿名自執(zhí)行函數(shù)中執(zhí)行

>rollup./src/index.js--filebundle.js--formatiife

如果沒(méi)有指定format，那么默認(rèn)會(huì)輸出為es格式。rollup支持的模塊輸出格式為:es、cjs、amd、umd、iife、system。其中cjs就是CommonJS模塊規(guī)范。

感謝各位的閱讀，以上就是“怎么理解web前端中的Rollup”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么理解web前端中的Rollup這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站題目：怎么理解web前端中的Rollup-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/gedgi.html