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 相关文章推荐
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
手把手教你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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
代码实例讲解python3的编码问题
2019/07/08 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python图像读写方法对比
2020/11/16 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
自荐信结尾
2013/10/27 职场文书
小学英语教学反思
2014/01/30 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
三八妇女节活动总结
2014/05/04 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
环境保护标语
2014/06/20 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
python非标准时间的转换
2021/07/25 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js