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文件项目实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

相关文章

  • Javascript刷新窗口方法小结

    Javascript刷新窗口方法小结

    这篇文章主要介绍了Javascript刷新窗口方法,以实例形式分析了JavaScript刷新窗口的四种常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Echarts之悬浮框中的数据排序问题

    Echarts之悬浮框中的数据排序问题

    Echarts非常强大,配置也非常的多,有很多细节需要深入研究。这篇文章主要介绍了Echarts之悬浮框中的数据排序问题,需要的朋友可以参考下
    2018-11-11
  • JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    最近看到朋友用JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,朋友使用jquery实现的,在网上看到有用js制作的也比较好,于是把我的内容整理分享给大家,具体详解请看本文
    2015-09-09
  • js代码延迟一定时间后执行一个函数的实例

    js代码延迟一定时间后执行一个函数的实例

    下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • bootstrap table实现横向合并与纵向合并

    bootstrap table实现横向合并与纵向合并

    这篇文章主要为大家详细介绍了bootstrap table实现横向合并与纵向合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 使用mouse事件实现简单的鼠标经过特效

    使用mouse事件实现简单的鼠标经过特效

    这篇文章主要介绍了使用mouse事件实现简单的鼠标经过特效的方法,需要的朋友可以参考下
    2015-01-01
  • js实现手机拍照上传功能

    js实现手机拍照上传功能

    这篇文章主要为大家详细介绍了js实现手机拍照上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript设计模式之单例模式简单实例教程

    JavaScript设计模式之单例模式简单实例教程

    这篇文章主要介绍了JavaScript设计模式之单例模式,结合简单实例形式分析了单例模式的概念、功能及javascript定义与使用单例模式相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 微信小程序自定义轮播图

    微信小程序自定义轮播图

    这篇文章主要为大家详细介绍了微信小程序自定义轮播图,swiper dots默认样式修改,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 屏蔽网页右键复制和ctrl+c复制的js代码

    屏蔽网页右键复制和ctrl+c复制的js代码

    解决的方法就是直接把网页保存下来然后删掉下面这段js代码,然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题
    2013-01-01

最新评论