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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
关于手调机和数调机的选择
2021/03/02 无线电
自己动手做一个SQL解释器
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python字典改变value值方法总结
2019/06/21 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
2015年质检工作总结
2015/05/04 职场文书
政审证明范文
2015/06/19 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js