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


Posted in Javascript onMay 31, 2018

关于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 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
javascript打开word文档的方法
Apr 16 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 #Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 #Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
vuejs实现标签选项卡动态更改css样式的方法
May 31 #Javascript
Vue组件之极简的地址选择器的实现
May 31 #Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 #Javascript
You might like
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JS实现self的resend
2010/07/22 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
详解Python中for循环的使用方法
2015/05/14 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python rstrip()方法实例详解
2018/11/11 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python轮询机制控制led实例
2020/05/03 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
物业管理毕业生的自我评价
2014/02/17 职场文书
应届生自荐信范文
2014/02/21 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
档案管理员岗位职责
2015/02/12 职场文书
安全生产感想
2015/08/07 职场文书
法制教育主题班会
2015/08/13 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python何绘制带有背景色块的折线图
2022/04/23 Python