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 相关文章推荐
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
List Installed Hot Fixes
2007/06/12 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
大一期末自我鉴定
2013/12/13 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
公司踏青活动方案
2014/08/16 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
考研经验交流会策划书
2015/11/02 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
mybatis 获取更新记录的id
2022/05/20 Java/Android