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简单体验
Jan 10 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Node.js学习入门
Jan 03 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
微信小程序如何获取手机验证码
Nov 04 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
简单谈谈favicon
2015/06/10 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
深入理解javascript变量声明
2014/11/20 Javascript
JS的数组迭代方法
2015/02/05 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python中使用while循环的实例
2019/08/05 Python
Python如何将函数值赋给变量
2020/04/28 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
《大海那边》教学反思
2014/04/09 职场文书
保护环境倡议书100字
2014/05/19 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
信息技术研修心得体会
2016/01/08 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技