Rollup处理并打包JS文件项目实例代码
关于Rollup
rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下:
- 能组合我们的脚本文件。
- 移除未使用的代码(仅仅使用ES6语法中)。
- 在浏览器中支持使用 Node modules。
- 压缩文件代码使文件大小尽可能最小化。
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文件项目实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 区块链技术(二):以太坊编程语言Solidity安装及入门初体验
- SQL注入测试神器sqlmap
- 人工智能也分强与弱?
- 【Scikit-Learn 中文文档】集成方法 - 监督学习 - 用户指南 | ApacheCN
- 2017黑科技 颠覆生活哪家强?
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【解读ServiceCallSite 】
- ASP.NET MVC的View是如何呈现出来的[实例篇]
- 把人类向机器人乞讨,变成对机器人征税
- 印度6大科技真相 会让很多人大吃一惊
- 了解ASP.NET MVC几种ActionResult的本质:HttpStatusCodeResult & RedirectResult/RedirectToRouteResult
- Python原创0基础入门一看几张图就学会了
- ASP.NET Core中的依赖注入(5):ServicePrvider实现揭秘【补充漏掉的细节】
- 了解ASP.NET MVC几种ActionResult的本质:FileResult
- ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [已解决]报错: ["Department":"??????????","Addr":"?????????????690???????"]
- 例16数字判断
- selector的使用
- Python获取xml数据
- Scrapy项目实战:爬取某社区用户详情
- 获取后缀名的文件
- [未解决]报错:requests post请求无法返回数据
- AkShare-股票数据-注册制审核
- tkinter的简单应用
- [已解决]报错: airtest PermissionError: [Errno 13] Permission denied
- LeetCode SQL
- 燕十八mysql复习
- 15.selenium_case04
- 16.ajax_case01
- 1.Python GUI之tkinter介绍