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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
JS实现手风琴特效
Nov 08 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 中的信号处理操作实例详解
2020/03/04 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
2017/12/21 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python验证码识别的示例代码
2017/09/21 Python
Python实现的建造者模式示例
2018/08/06 Python
python绘制热力图heatmap
2020/03/23 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python实现LRU热点缓存及原理
2019/10/29 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
安阳殷墟导游词
2015/02/10 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2016年清明节寄语
2015/12/04 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS