Rollup處理并打包JS文件項(xiàng)目實(shí)例代碼
關(guān)于Rollup
rollup是一款用來es6模塊打包代碼的構(gòu)建工具(支持css和js打包)。當(dāng)我們使用ES6模塊編寫應(yīng)用或者庫(kù)時(shí)，它可以打包成一個(gè)單獨(dú)文件提供瀏覽器和Node.js來使用。 它的優(yōu)點(diǎn)有如下：
- 能組合我們的腳本文件。
- 移除未使用的代碼(僅僅使用ES6語(yǔ)法中)。
- 在瀏覽器中支持使用 Node modules。
- 壓縮文件代碼使文件大小盡可能最小化。
Rollup最主要的優(yōu)點(diǎn)是它是基于ES2015模塊的，相比于webpack或Browserify所使用的CommonJS模塊更加有效率，因?yàn)镽ollup使用一種叫做tree-shaking的特性來移除模塊中未使用的代碼，這也就是說當(dāng)我們引用一個(gè)庫(kù)的時(shí)候，我們只用到一個(gè)庫(kù)的某一段的代碼的時(shí)候，它不會(huì)把所有的代碼打包進(jìn)來，而僅僅打包使用到的代碼(webpack2.0+貌似也引入了tree-shaking)。
注意：Rollup只會(huì)在ES6模塊中支持tree-shaking特性。目前按照CommonJS模塊編寫的jquery不能被支持tree-shaking。
Rollup的應(yīng)用場(chǎng)景
現(xiàn)在目前流行的打包有 gulp 和 webpack，那么與前面兩個(gè)對(duì)比，我覺得rollup更適合打包js庫(kù)，但是對(duì)于打包一個(gè)項(xiàng)目的整個(gè)應(yīng)用的話，我到覺得webpack更適合，比如打包一些圖片，字體等資源文件的時(shí)候，webpack很適合。
本項(xiàng)目的使用方法
項(xiàng)目地址：GitHub
通過GitHub下載項(xiàng)目文件，在命令行工具定位到項(xiàng)目根目錄，然后輸入 npm install 安裝模塊，在輸入下面其中一個(gè)命令：
1、在命令行中輸入以下命令，即可監(jiān)聽文件變化并打包文件
npm run dev
2、在命令行中輸入以下命令，即可完成打包
npm run build
總結(jié)
以上所述是小編給大家介紹的Rollup處理并打包JS文件項(xiàng)目實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js使用html()或text()方法獲取設(shè)置p標(biāo)簽的顯示的值
html()方法可以用來讀取或者設(shè)置某個(gè)元素中的HTML內(nèi)容，text()方法可以用來讀取或者沒置某個(gè)元素中的文本內(nèi)容2014-08-08
淺析Javascript中bind()方法的使用與實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獪\析Javascript中bind()方法的使用與實(shí)現(xiàn)。小編覺得挺2016-05-05
用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
TypeScript中Map對(duì)象使用及Map與字典的區(qū)別詳解
Map對(duì)象主要的應(yīng)用場(chǎng)景在于數(shù)據(jù)重組和數(shù)據(jù)儲(chǔ)存,下面這篇文章主要給大家介紹了TypeScript中Map對(duì)象使用及Map與字典的區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
使用javascript獲取flash加載的百分比的實(shí)現(xiàn)代碼
使用javascript獲取flash加載的百分比的實(shí)現(xiàn)代碼，方便flash小游戲判斷頁(yè)面，提高用戶體驗(yàn)。2011-05-05
javascript實(shí)現(xiàn)的左右無(wú)縫滾動(dòng)效果
這篇文章主要介紹了javascript實(shí)現(xiàn)的左右無(wú)縫滾動(dòng)效果,可實(shí)現(xiàn)左右平滑無(wú)縫滾動(dòng)的效果,并且可響應(yīng)鼠標(biāo)滑過而停止?jié)L動(dòng),非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09
在JavaScript中,我們經(jīng)常需要對(duì)數(shù)據(jù)的類型進(jìn)行判斷,以便進(jìn)行相應(yīng)的處理,本文將介紹JavaScript中常見的類型判斷方法,包括typeof、instanceof、Object.prototype.toString() 以及Array.isArray(),并且會(huì)詳細(xì)解釋它們之間的區(qū)別,需要的朋友可以參考下2023-11-11
本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫組2013-08-08
javascript中Date format(js日期格式化)方法小結(jié)
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實(shí)例總結(jié)了三種常見的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12
JS操作CSS隨機(jī)改變網(wǎng)頁(yè)背景實(shí)現(xiàn)思路
JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然我的回答是可以的，下面是具體的實(shí)現(xiàn)思路，感興趣的朋友可以參考下2014-03-03