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

相关文章

  • js 基础篇必看(点击事件轮播图的简单实现)

    js 基础篇必看(点击事件轮播图的简单实现)

    下面小编就为大家带来一篇js 基础篇必看(点击事件轮播图的简单实现)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • swiper插件自定义切换箭头按钮

    swiper插件自定义切换箭头按钮

    这篇文章主要为大家详细介绍了swiper插件自定义切换箭头按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • JavaScript实现的拼图算法分析

    JavaScript实现的拼图算法分析

    这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下
    2019-02-02
  • js+css实现导航效果实例

    js+css实现导航效果实例

    这篇文章主要介绍了js+css实现导航效果,实例分析了下拉菜单导航的js实现方法,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript闭包的简单应用

    JavaScript闭包的简单应用

    这篇文章主要为大家详细介绍了JavaScript闭包的简单应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 微信小程序中为什么使用var that=this

    微信小程序中为什么使用var that=this

    这篇文章主要介绍了小程序中为什么使用var that=this的相关知识,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 详解Javascript中prototype属性(推荐)

    详解Javascript中prototype属性(推荐)

    这篇文章主要介绍了Javascript中prototype属性的相关资料,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • Javascript动画效果(4)

    Javascript动画效果(4)

    这篇文章主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Javscript删除数组中指定元素并返回新数组

    Javscript删除数组中指定元素并返回新数组

    把数组中某个值删除,并返回新数组,需要遍历旧数组找到要删除的元素,下面有个不错的示例,大家可以参考下
    2014-03-03
  • JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式

    JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前

    最近在做项目的时候,需要把后台返回的时间转换成几秒前、几分钟前、几小时前、几天前等的格式,接下来通过本文给大家分享JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式 ,需要的朋友可以参考下
    2019-07-07

最新评论