Rollup处理并打包JS文件项目实例代码

 更新时间:2018年05月31日 14:41:35   作者:雨霖月寒  
rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。这篇文章主要介绍了Rollup处理并打包JS文件项目实例,需要的朋友可以参考下

关于Rollup

rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下:

  1. 能组合我们的脚本文件。
  2. 移除未使用的代码(仅仅使用ES6语法中)。
  3. 在浏览器中支持使用 Node modules。
  4. 压缩文件代码使文件大小尽可能最小化。

Rollup最主要的优点是它是基于ES2015模块的,相比于webpack或Browserify所使用的CommonJS模块更加有效率,因为Rollup使用一种叫做tree-shaking的特性来移除模块中未使用的代码,这也就是说当我们引用一个库的时候,我们只用到一个库的某一段的代码的时候,它不会把所有的代码打包进来,而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。

注意:Rollup只会在ES6模块中支持tree-shaking特性。目前按照CommonJS模块编写的jquery不能被支持tree-shaking。

Rollup的应用场景

现在目前流行的打包有 gulp 和 webpack,那么与前面两个对比,我觉得rollup更适合打包js库,但是对于打包一个项目的整个应用的话,我到觉得webpack更适合,比如打包一些图片,字体等资源文件的时候,webpack很适合。

本项目的使用方法

项目地址:GitHub

通过GitHub下载项目文件,在命令行工具定位到项目根目录,然后输入 npm install 安装模块,在输入下面其中一个命令:

1、在命令行中输入以下命令,即可监听文件变化并打包文件

npm run dev

2、在命令行中输入以下命令,即可完成打包

npm run build

总结

以上所述是小编给大家介绍的Rollup处理并打包JS文件项目实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    LayUi使用switch开关,动态的去控制它是否被启用的方法

    今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js前台分页显示后端JAVA数据响应

    js前台分页显示后端JAVA数据响应

    js前台分页显示使用jquery1.8.7框架,本文目的主要给那些刚入行软件开发,喜欢这也看看,程序需要有投入才有收获感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-03-03
  • 微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    这篇文章主要介绍了微信小程序api列表汇总包括网络API,媒体API,文件API ,数据API,位置API,界面API,微信小程序支付流程,微信小程序登录流程等,需要的朋友可以参考下
    2022-12-12
  • 鼠标移入移出事件改变图片的分辨率的两种方法

    鼠标移入移出事件改变图片的分辨率的两种方法

    做一个鼠标移入移出图片事件,首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同,具体实现如下,感兴趣的朋友可以参考下
    2013-12-12
  • ES6中Proxy代理用法实例浅析

    ES6中Proxy代理用法实例浅析

    这篇文章主要介绍了ES6中Proxy代理用法,结合实例形式简单分析了Proxy代理的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • js操纵dom生成下拉列表框的方法

    js操纵dom生成下拉列表框的方法

    这篇文章主要介绍了js操纵dom生成下拉列表框的方法,需要的朋友可以参考下
    2014-02-02
  • js中几种循环的退出方式实例总结

    js中几种循环的退出方式实例总结

    提到在一段程序中如果碰到需要终止,结束一个循环,函数或者一段代码,一般会想到以下这几个关键字return、continue、break,这篇文章主要给大家介绍了关于js中几种循环的退出方式,需要的朋友可以参考下
    2022-12-12
  • js仿百度登录页实现拖动窗口效果

    js仿百度登录页实现拖动窗口效果

    这篇文章主要为大家详细介绍了js仿百度登录页实现拖动窗口效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript中for循环的几种写法与效率总结

    JavaScript中for循环的几种写法与效率总结

    每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时,效率问题必须重视。下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • javascript实现在指定元素中垂直水平居中

    javascript实现在指定元素中垂直水平居中

    当谈到网页的布局中,居中问题一直得不到很有效的解决,居中通常是相对于某一个元素的,比如我们经常所说的屏幕居中的问题,我们了解父元素的信息越多,我们就越能更加容易的实现居中布局。下面我们通过具体的实例来看看javascript如何来实现垂直水平居中
    2015-09-09

最新评论