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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
使用Vue实现简单计算器
Feb 25 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 ajax 静态分页过程形式
2011/09/02 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
canvas知识总结
2017/01/25 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
vue路由--网站导航功能详解
2019/03/29 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
火车来了教学反思
2014/02/11 职场文书
推荐信格式要求
2014/05/09 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
盲山观后感
2015/06/11 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
php双向队列实例讲解
2021/11/17 PHP
Python实现视频中添加音频工具详解
2021/12/06 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS